CODEWITHSUNDEEP
jqueryhtmlcsstabs
John
John

Reputation: 1009

jQuery dynamic tab colours (all except one tab)

I have a UL with the class of "tabs" one li has a class of "active"

The "active" tab obviously changes as a user clicks on a different tab and is used so the colour of it is different to the rest.

What i want to do is select all the Li's within the "tabs" UL EXCEPT for the active one and set each one a different colour by appending CSS background for each. The amount of tabs can differ depending on which page they are on I.E one page may have four tabs but another may have 6 or 7.

If i was grabbing them all i wouldnt have a problem but im not sure how to go about it to try and exclude the active tab since i had planned on using Nth which would INCLUDE the active tab?

Any help appreciated.

Upvotes: 1

Views: 133

Answers (3)

James Donnelly
James Donnelly

Reputation: 128791

You can use .not():

$('ul.tabs li').not('.active').css({ ... });

You can then iterate through them using .each():

$('ul.tabs li').not('.active').each(function() { ... });

Edit: Assuming then that you have some way of determining which tab should have which background, here is an example of this in use: JSFiddle.

Upvotes: 2

Daniel
Daniel

Reputation: 1295

If you want to do this in css3 you can use this:

:not(p)
{
background:#ff0000;
}

This sets a background color for all elements that are not a "p" element. More info: http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/

Upvotes: 0

hammus
hammus

Reputation: 2612

Assuming "active" is what is applied to the tab container when its clicked and all tabs have something like class="tab" something like this should suffice. 

$(".tab").each(funciton() {
    if (!$(this).hasClass("active"))
    {
            $(this).addClass("myBackground");
    }
});

Upvotes: 0

Related Questions