我想将活动类添加到我的html代码中的所有主要类别块,如下所示: -
<ul class="tabs">
<li class="accordion"><a href="#tab1">Boo1</a>
<ul id="sub-nav">
<li><a href="http://www.myweb.com"> Ipsum Text</a></li>
<li><a> Lorem text</a></li>
<li><a> More lorem text </a></li>
<li><a> Dolor Sit Amet </a></li>
</ul>
</li>
<li><a href="#tab2">Boo2</a></li>
<li><a href="#tab3">Boo3</a></li>
<li class="last-item"><a href="#tab4">Boo4</a></li>
</ul>
以这种方式设计: -
#sub-nav > .active {background:#AAA;}
.tabs li a.active { background: green; }
.tabs li a {font-size:20px;}
#sub-nav li a {font-size:16px; margin-left:20px;}
所以我这样做了: -
(function(){
$('.tabs #sub-nav li').bind('click', function(e){
var subNavList = $(this),
list = $('.tabs').find('li').add('.tabs a');
list.removeClass('active');
subNavList.addClass('active').parents('li').addClass('active').children('a').addClass('active');
});
}());
我现在唯一的问题是当点击其他导航列表(boo2和boo3)时,未应用活动类。请查看jsfiddle代码以更好地理解。 http://jsfiddle.net/gfkM4/6/我做错了什么?有人可以帮帮我吗?
答案 0 :(得分:3)
我相信这就是你要找的东西(单击时选择顶部导航也会在点击时同时选择subnav和它的父级):
(function(){
$('.tabs a').on('click', function(e){
$('.tabs a').removeClass('active');
$(this).addClass('active');
$(this).closest('ul').closest('li').children('a').addClass('active');
})
}());