Question

我正在实施here，它有一个主导航和一个子菜单导航。

我无法正确显示$(".side-nav a").on("click", function(){ $(".side-nav").find(".active").removeClass("active"); $(this).parent().addClass("active"); });课程。

当我加载页面时，它是正确的： this theme

但是当我点击其他页面时，例如客户：仪表板仍然突出显示。

所以我添加了一些jQuery：

<div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav">
            <li class="active">
                <a href="/"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
            </li>
            <li>
                <a href="/clients"><i class="fa fa-fw fa-bar-chart-o"></i> Clients</a>
            </li>

这确实会导致活动类移动到客户端，但只有在它加载页面时，它才会返回到Dashboard。

这是输出（在页面客户端上）：

<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
....
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav">
            <li class="active">
                <a href="/"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
            </li>
            <li>
                <a href="/clients"><i class="fa fa-fw fa-bar-chart-o"></i> Clients</a>
            </li>
            ...
</nav>
<div id="page-wrapper">
    <div class="container-fluid">
        <!--here is where all my content goes-->
        <section layout:fragment="mainContent">
            <!-- Content replaced by each page's content fragment -->
            <p>This section will not render, overriden by child</p>
        </section>
        ...

但您不会看到错误，因为它只显示首页。

显然我在这里错过了一个技巧。

更新我正在使用布局页面（Java Spring），所以这就是我的布局页面的样子：

...
<body>
<div layout:fragment="mainContent">
    ...
</div>

然后我的clients.html页面将如下所示：

.active

硬编码.active类是问题，因为当页面从一个页面跳到下一个页面时，它会加载布局并在那里看到硬编码的仪表板manifest.json类。

Answer 1

好的，我想出了一个非常丑陋的解决方案，但似乎确实有效。

使用JQuery，我在当前项目上加载active类，然后在用户离开页面时删除活动类。

我必须对我的列表结构进行一些小改动，添加一些ID：

<ul id="submenu" class="nav navbar-nav side-nav">
    <li id="submenu-dashboard" >
        <a href="/"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
            </li>
    <li id="submenu-clients">
        <a href="/clients"><i class="fa fa-fw fa-bar-chart-o"></i> Clients</a>
    </li>
    ...

JQuery：

//removes active state from all pages before it unloads
$(window).bind('beforeunload', function(){
    $('#submenu li').each(function(){
        $(this).removeClass("active");
    });
});

//adds active state to the current page on load
$(document).ready(function () {
    var currentPage = $(location).attr('pathname').replace('/', '');
    $('#submenu li').each(function () {
        var itemId = $(this).attr('id');

        //we check the currentPage matches the Id
        if (itemId.indexOf(currentPage) >= 0) {
            $(this).addClass("active");
            return false;
        }
    });
});

注意：li元素必须的ID包含网页的网址。

Bootstrap .active state子菜单无法正常工作

1 个答案: