Подменю BootStrap .active state не работает правильно

Я реализую this theme, который имеет главный навигатор и подменю nav.Подменю BootStrap .active state не работает правильно

У меня возникли проблемы с получением класса .active для правильного отображения.

Когда я загрузить страницу, это правильно:

Но когда я нажимаю на другой странице, например, клиентов: Панель приборов остается подсвеченной.

Так что я добавил немного JQuery:

$(".side-nav a").on("click", function(){ 
    $(".side-nav").find(".active").removeClass("active"); 
    $(this).parent().addClass("active"); 
});

И это вызывает активный класс, чтобы перейти к клиенту, но только тогда, когда он загрузит страницу, она затем возвращается к панели управления.

Вот вывод (на странице Клиенты):

<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>

Here is a fiddle,, но вы не увидите сообщение об ошибке, так как он показывает только на первой странице.

Ясно, что я упускаю трюк здесь.

Update Я использую макет страницы (Java Spring), так это то, как моя страница макет выглядит:

<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> 
     ...

И тогда моя страница clients.html будет выглядеть следующим образом:

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

Проблема заключается в жестком закодированном активном классе, поскольку, когда страница перескакивает с одной страницы на другую, она загружает макет и видит там класс hardcoded dashboard .active.

источник

2016-03-31 gudthing

У вас есть другая .html-страница для каждой страницы? Например, это страница dashboard.html панели мониторинга и диаграмма page charts.html? Если это так, у вас есть «активный» класс, жестко закодированный в вашем html на странице панели инструментов, поэтому, когда вы переходите на страницу диаграмм, активный класс возвращается к панели управления. Если у вас есть другая страница .html для каждой страницы, просто переместите «активный» класс в html на текущую страницу. –

@JoshSalazar. Да, они находятся на разных страницах, но я использую «страницу макета», поэтому панель навигации загружен из макета, а не с текущей html-страницы.Я обновлю свой ответ, чтобы показать вам, как выглядит страница – gudthing

@JoshSalazar Я вижу, что происходит. Как я могу обходить это тогда? Вы правы, каждый раз, когда загружается моя страница, он видит, что 'dashboard' имеет hardcoded' .active' класс, поэтому он загружает это. – gudthing

Хорошо, я придумал довольно уродливое решение, но похоже, что он работает.

С помощью JQuery я загружаю класс active на текущий элемент, а затем удаляю активный класс, когда пользователь покидает страницу.

я должен был сделать небольшие изменения в моем списке структуру, добавив некоторые Идентификаторы:

<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 элемента MUST содержать адрес страница.

источник

2016-04-01 08:47:16 gudthing

Подменю BootStrap .active state не работает правильно

ответ

Смежные вопросы