主动点击链接

Question

i'm trying to apply a selected/active effect on my tabs. So when a tab is selected it should apply the active class on it and by default the first tab is the active class. I've tried with a jquery function but not seem to work:

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

There's no need for two different click bindings:

$(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/

Also the CSS is wrong; nav li background cannot be made !important , it'll override the active class.

I cleaned up the css: http://jsfiddle.net/9c2kxz09/4/

Answer 2

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

Thats the basic outline for the jQuery click event. Amend as necessary but ensure you are removing and adding the class to the same element. Hope this helps :)

Answer 3

The primary issue is that in your fiddle, you are including jQuery 1.6, a very old version. Include 1.9.1 at least.

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

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