Добавление Twitter's Bootstrap 2.x "активный" класс в элемент "li" внутри div

Я использую Bootstrap для создания навигационного меню. Nav загружается на страницу asdf2.html с помощью jQuery load(). У меня возникают трудности при добавлении "активного" класса в подлинк, когда пользователь переходит на asdf2.html.

Как я могу добавить активный класс к подссылке, когда пользователь загружает asdf2.html? Я верю, что div вызывает проблемы, но я не совсем уверен, почему...

asdf2.html (загружает страницу sub-nav.html в div sub-nav и добавляет активный класс в ссылки):

<div id="sub-nav"></div>

<script>
jQuery(function(){
    $('#sub-nav').load('sub-nav.html', function() {
         $('#sub-nav a:contains("Link")').parent().addClass('active'); //WORKS
         $('#sub-nav a:contains("subLink")').parent().addClass('active'); //DOESN'T WORK
    })
});
</script>

sub-nav.html (li в div не добавляет Class):

<div class="well sidebar-nav span3" style="margin-left:0px;">
      <ul class="nav nav-list">
           <li><a href="asdf.html">Link</a></li>
           <div>
               <li><a href="asdf2.html">subLink</a></li>
           </div>
      </ul>
</div>
Источник

3 ответа

Выпуск:

CSS-правила в bootstrap.css этот стиль a теги внутри навигационных списков имеют следующие виды селекторов:

// Hover/focus
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
    ...
}

// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    ...
}

Смотрите код здесь.

Добавление лишнего div в вашей разметке действительно нарушает разметку - .active узел не является прямым потомком .nav узел больше.

Я не просматривал код javscript, но я бы предположил, что события также связаны с использованием того же вида селектора.

Предложение:

Если вы хотите следовать структуре фреймворка начальной загрузки, удалите div узел.

Или, может быть, добавить class="nav" на ваш div - не забудьте тщательно проверить результат, хотя...

Вопрос:

Зачем тебе это нужно div на первом месте?

Источник

Есть простой способ сделать это. Вам нужно проверить загруженный URL, а затем добавить свой класс в соответствующий элемент li. Так,

<script>
  $(function(){
     var pageLink = document.URL;
     $("#yourNavDiv").children("li").each(function(){
         if($(this).children("a:first-child").attr("href") == pageLink){
             $(this).addClass("active");
         }
     });
  });
</script>
Источник

1. используйте готовый документ для запуска вашего jquery (jQuery(document).ready(function($) { // Code using $ as usual goes here. });) см. также: http://api.jquery.com/ready/

2. вы помещаете теги li своего subnav в div вместо тега ul

3. используйте селектор css, чтобы сделать видимым активный элемент подменю:

.nav-list li.active li.active > a{
background-color: #0088CC;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
 }

Рабочий пример кода:

 <!DOCTYPE html>
 <html>
 <head>
 <title>Responsive nesting</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
    <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
      }

    .nav-list li.active li.active > a{
    background-color: #0088CC;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
     }


    </style>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">


<style type="text/css">
</style>
    </head>
    <body>
<div id="sub-nav"></div>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
<script>
jQuery(document).ready(function($) {
    $('#sub-nav').load('sub-nav.html', function() {
         $('#sub-nav a:contains("Link")').parent().addClass('active'); //WORKS
         $('#sub-nav a:contains("subLink")').parent().addClass('active'); //DOESN'T WORK
    })
});
</script>  
</body>
</html>

ПРИМЕЧАНИЕ, даже если вы положили свой li в div, он все еще работает. Почему ты должен? это ломает ваш HTML. (использование .nav-list li.active > a в твоем css чтоб было видно)

Смотрите также: http://plnkr.co/9Xc2ThJ3ZEuJqlKLkj0r который показывает тот же результат для правильного HTML и вашего li внутри div.

Источник
Другие вопросы по тегам