主动点击链接

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 background !important ，它将覆盖active类。

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

Answer 2

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

这就是jQuery click事件的基本轮廓。 根据需要进行修改，但确保要删除该类并将其添加到同一元素。 希望这可以帮助 ：）

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/