将 Twitter 的 Bootstrap 2.x“活动”类添加到 div 内的“li”元素答案

【问题标题】：Adding Twitter's Bootstrap 2.x "active" Class to "li" element inside a div将 Twitter 的 Bootstrap 2.x“活动”类添加到 div 内的“li”元素
【发布时间】：2013-06-07 16:42:44
【问题描述】：

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

当用户加载 asdf2.html 时，如何将活动类添加到子链接？我相信 div 会导致问题，但我不确定为什么......

asdf2.html（将 sub-nav.html 页面加载到 sub-nav 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没有addClass）：

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

【问题讨论】：

我只是用 .html() 而不是 .load() 尝试了这个，它似乎工作得很好：jsfiddle.net/TF7GZ你有一个不能工作的活生生的例子吗？跨度>
.load 对我来说很好。它正在为不起作用的子链接添加 cssAdd。当用户导航到 subLink 时，jquery 应该添加一个类（突出显示用户所在的当前页面）。它不起作用，因为它在一个 Div 中。我正在尝试让 addclass 工作。
所以，据我了解，你有三个页面：主页面，asdf.html，asdf2.html。另外，您还有一个通用的 sub-hav.html 加载到所有文件中。您希望“a[href=asdf.html]”在 asdf.html 上处于活动状态，而“a[href=asdf2.html]”在 asdf2.html 上处于活动状态？
正确。当用户转到 asdf2.html 时，导航栏中的“子链接”应突出显示（通过添加“活动”类）。它适用于“链接”，但不适用于“子链接”。我相信我的 $('#sub-nav a:contains("subLink")').parent().addClass('active'); 的语法不正确
语法似乎正确。还有一个问题：asdf.html 和 asdf2.html 是否具有与示例中相同的 HTML 和 JavaScript 代码？如果没有 - 请您也分享一下。

标签： jquery twitter-bootstrap addclass

【解决方案1】：

问题：

bootstrap.css 中的 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 {
    ...
}

查看代码here。

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

我没有浏览过 javscript 代码，但我想这些事件也是使用同一种选择器绑定的。

建议：

如果要遵循引导框架结构，请删除 div 节点。

或者也许将class="nav" 添加到您的div - 不过一定要彻底测试结果...

问题：

你为什么首先需要这个div？

【讨论】：

【解决方案2】：

1. 使用准备好的文档来触发您的 jquery (jQuery(document).ready(function($) { // Code using $ as usual goes here. });) 另请参阅：http://api.jquery.com/ready/

2.您将子导航的 li 标签放在 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。（在你的 CSS 中使用 .nav-list li.active > a 使其可见）

另请参阅：http://plnkr.co/9Xc2ThJ3ZEuJqlKLkj0r，它在 div 中显示正确的 html 和您的 li 的相同结果。

【讨论】：

【解决方案3】：

有一个简单的方法可以做到这一点。您需要检查已加载的 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>

【讨论】：