Question

I’m using jquery to create tabs, which works fine by adding a class=”current” to the li – which changes the background of the current tab…great…

I now need to use this code to instead add the class=”current” to the “a” tag within the li – instead of the li….it can add it fine, but, the trouble is it now doesn’t remove it from the other li “a” that was highlighted… for example:

 jQuery(this).closest("li a").addClass("current").siblings().removeClass("current");

Html

<li id="slide_brand"><a class="current" href="#tab1">Brands</a></li>
<li id="slide_sites"><a href="#tab2">Sites</a></li>
<li id="slide_photo"><a href="#tab3">Photos</a></li>

Must be to do with the “siblings” part… but I don’t know what to change it too! 🙁

Can someone help please?

Thank you.

Answer 1

I think the better approach in doing this is still adding the class at the li level.

try this instead:

li.select > a
{
    background: red;
}

li > a
{
    display: block;
}

for javascript part:

$("#menu > li").click(function(){
    $(this).addClass("current").siblings().removeClass("current");
})