Adminlte 左侧菜单栏点击激活 Adminlte高亮显示


经本人实际测试完全准确有效~

<script>
    $(function(){
    /** add active class and stay opened when selected */
    var url = window.location;
    // for sidebar menu entirely but not cover treeview
    $('ul.nav-sidebar a').filter(function() {
        return this.href == url;
    }).addClass('active');
    // for treeview
    $('ul.nav-treeview a').filter(function() {
        return this.href == url;
    }).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
});
</script>
<!-- Sidebar Menu -->
<nav class="mt-2 sidebar-menu">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        <!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
        <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
                <i class="nav-icon fas fa-tachometer-alt"></i>
                <p>
                    SiderBar1
                    <i class="right fas fa-angle-left"></i>
                </p>
            </a>
            <ul class="nav nav-treeview">
                <li class="nav-item">
                    <a href="/show" class="nav-link">
                        <i class="far fa-circle nav-icon"></i>
                        <p>列表</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="/showAdd" class="nav-link">
                        <i class="far fa-circle nav-icon"></i>
                        <p>添加配置</p>
                    </a>
                </li>
            </ul>
        </li>
        <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
                <i class="nav-icon fas fa-tachometer-alt"></i>
                <p>
                    SiderBar2
                    <i class="right fas fa-angle-left"></i>
                </p>
            </a>
            <ul class="nav nav-treeview">
                <li class="nav-item">
                    <a href="/show2" class="nav-link">
                        <i class="far fa-circle nav-icon"></i>
                        <p>列表</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="/showAdd2" class="nav-link">
                        <i class="far fa-circle nav-icon"></i>
                        <p>添加配置</p>
                    </a>
                </li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="/logout" class="nav-link">
                <i class="nav-icon fas fa-th"></i>
                <p>
                    退出
                </p>
            </a>
        </li>
    </ul>
</nav>


修改active状态样式

找到adminlte.min.css

找到如下字段

.nav-link.active:hover{background-color:rgba(255,255,255,.9);color:#343a40}

修改active 激活背景颜色,透明度,与字体颜色



Adminlte 左侧菜单栏点击激活 Adminlte高亮显示

来源于https://www.cnblogs.com/greycdoer0/archive/2004/01/13/14096718.html