Question

我正在使用Bootstrap来创建导航菜单。使用jQuery load（）将nav加载到asdf2.html页面。当用户转到asdf2.html时，我很难将“active”类添加到subLink。

当用户加载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>

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

Answer 2

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

2。您将subnav的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>

注意即使你把你的李放在div中它仍然有效。你为什么要？它打破了你的HTML。（在你的CSS中使用.nav-list li.active > a使其可见）

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

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

将Twitter的Bootstrap 2.x“active”类添加到div中的“li”元素

3 个答案: