Can someone tell me what I’m doing wrong here. Trying to remove/add class attribute to li so that correct one is active when clicked: http://jsfiddle.net/cyberpuunk/D2RLR/2372/
<div class="container">
<div class="span8">
<ul class="nav nav-tabs gallery-nav">
<li class="active">
<a href="#"<strong>All</strong></a>
</li>
<li><a href="#"><strong>link1</strong></a></li>
<li><a href="#"><strong>link2</strong></a></li>
</ul>
</div>
<div class="row">
<div class="span12">
<div class="page1">qwer</div>
<div class="page1">asdf</div>
<div class="page1">zxcv</div>
</div>
</div>
</div>
$('.page1:gt(0)').hide();
$('ul.gallery-nav li').click(function(e) {
e.stopPropagation();
var liIndex = $(this).index();
$('.page1').hide().eq(liIndex).show();
$(this).removeClass("active");
eq(liIndex).addClass("active");
}); // end click
Fiddle
You had a syntax error at
.eq()is a jQuery object method and not a function that you can on its own. That could be fixed by using$('ul.gallery-nav li').eq(liIndex).addClass("active");BUT there would would be still a logic flaw:You’re supposed to
addinstead ofremovethe class, asthisreferences the clickedliand not the whole group of list items which you’re attaching the handler to. With that said, the fixed version of your code is: