2016-08-03 4 views
-2

используя нижнюю навигационную панель для начальной загрузки.Bootstarp navbar активный класс, используя jquery

 <div class="navbar-default">    
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="Link1">Link1</a> 
       </li> 
       <li> 
        <a href="Link2">Link2</a> 
       </li> 
      </ul> 
     </div> 

используя ниже JQuery для активации ссылки

$(document).ready(function() { 
    $('ul.nav > li').click(function (e) { 
     e.preventDefault(); 
     $('ul.nav > li').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

при использовании приведенного выше кода активного класса работает отлично, но страница не получает загружена.

когда комментарий e.preventDefault(); страница загружается, но активный класс не работает.

+0

Вам необходимо настроить класс для конкретного пункта меню после загрузки страницы. –

+1

Вы добавляете активный класс в обработчик кликов; вы могли бы получить то, что хотите, добавив 'window.location = $ (this) .attr ('href');', но почему? Класс будет добавлен непосредственно перед разгрузкой страницы (после href). – AVProgrammer

+0

Можете ли вы показать мне код, как это сделать? –

ответ

0

Для вашей проблемы предположим, что есть две страницы HTML: page1.html и page2.html. Не обращая внимания на ваш JavaScript, когда вы нажимаете ссылку на page1.html, он переходит к page2.html. Если вы установите класс active на соответствующую ссылку в page2.html, он должен работать (установите ссылку, которая будет page2.html в качестве активной ссылки).

В вашем JavaScript e.preventDefault() предотвращает действие по умолчанию. В этом случае он перестает перенаправлять веб-страницу на новую ссылку. Даже если вам как-то удалось заставить его работать, когда вы загружаете page2.html, любой JavaScript, который вы запустили ранее на page1.html (установка активного класса), равен , а не, переведённый на page2.html. Так что JavaScript бесполезен.

Просто редактирование активной ссылки page2.html - это способ сделать это, вместо того, чтобы пытаться применить Javascript к page1.html и передать его page2.html.

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