Question

我正在尝试在我的标签上应用选定/有效效果。因此，当选择一个选项卡时，它应该在其上应用活动类，默认情况下，第一个选项卡是活动类。我尝试过使用jquery函数，但似乎不起作用：

的jsfiddle： http://jsfiddle.net/8thrh/82/

$(function() {
    $('#nav').find('a').click(function(e) {
        e.preventDefault();
        $(this.hash).show().siblings().hide();
    }).filter(':first').click();
});

$('a').on('click',function(){
   $('li').removeClass('active');
    $(this).addClass('active');
});

#nav li {
    display: inline-block;
    padding: 10px 11px;
    background: #fff !important;
    margin-right: 6px;
}

#nav ul {

}

#nav li a {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
}

.active {
     background: #000000 !important;
    color: #fff;
}

<ul id="nav">
    <li><a href="#part-1">Leage of Legends</a></li>
    <li><a href="#part-2">CS:GO</a></li>
    <li><a href="#part-3">Dota2</a></li>
    <li><a href="#part-3">Hearthstone</a></li>
</ul>
<div id="content">
    <div id="part-1">
        Ma première partie
    </div>
    <div id="part-2">
        Ma deuxième partie
    </div>
    <div id="part-3">
        Ma troisième partie
    </div>
</div>

Answer 1

不需要两种不同的点击绑定：

$(function() {
   $('#nav').find('a').click(function(e) {
       e.preventDefault();
       $(this.hash).show().siblings().hide();
       $('#nav').find('a').parent().removeClass('active')
       $(this).parent().addClass('active')
   }).filter(':first').click();
});

http://jsfiddle.net/9c2kxz09/1/

CSS也错了; nav li背景无法!important，它将覆盖active类。

我清理了css：http://jsfiddle.net/9c2kxz09/4/

Answer 2

$('a').click(function() {
   $('a').removeClass('active');
    $(this).addClass('active');
});

这是jQuery点击事件的基本大纲。根据需要进行修改，但要确保删除并将类添加到同一元素中。希望这会有所帮助：）

Answer 3

主要问题是，在你的小提琴中，你包括jQuery 1.6，一个非常古老的版本。至少包括1.9.1。

$('a').on('click',function(){
     $('li a').removeClass('active');
     $(this).addClass('active');
}).first().click();

http://jsfiddle.net/8thrh/87/

点击链接时激活li

3 个答案: