jquery - 将 Twitter 的 Bootstrap 2.x "active"类添加到 div 内的 "li"元素

Question

我正在使用 Bootstrap 创建导航菜单。使用 jQuery load() 将导航加载到 asdf2.html 页面中。当用户转到 asdf2.html 时，我很难将“active”类添加到子链接。

当用户加载asdf2.html时，如何将事件类添加到子链接？我相信 div 引起了问题，但我不太确定为什么......

asdf2.html(将 sub-nav.html 页面加载到子导航 div 并将事件类添加到链接):

<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(div中的li不添加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>

Answer 1

问题:

bootstrap.css 中导航列表内 a 标签样式的 CSS 规则具有以下类型的选择器:

// 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 {
    ...
}

查看代码here .

在标记中添加额外的 div 确实会破坏标记 - .active 节点不是 .nav 的直接子节点不再有节点了。

我还没有浏览过 javscript 代码，但我想这些事件也使用相同类型的选择器进行绑定(bind)。

建议:

如果您想遵循 Bootstrap 框架结构，请删除 div 节点。

或者也许将 class="nav" 添加到您的 div - 请务必彻底测试结果...

问题:

为什么首先需要这个 div ？