2

我正在使用 Bootstrap 创建导航菜单。使用 jQuery load() 将导航加载到 asdf2.html 页面中。当用户转到 asdf2.html 时，我很难将“活动”类添加到 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>
4

3 回答 3

2

问题 ：

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

请参阅此处的代码。

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

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

建议 ：

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

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

问题 ：

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

于 2013-06-26T12:02:41.207 回答
0

有一个简单的方法可以做到这一点。您需要检查已加载的 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>
于 2013-06-25T12:52:47.533 回答
0

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。（.nav-list li.active > a在您的 CSS 中使用以使其可见）

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

于 2013-06-21T20:22:31.717 回答