HTML Setting Active with different background colour

Here is my HTML List:

            <ul id="navlist">
                <li class="item1"><a href="#">One</a></li>
                <li class="item2"><a href="#">Two</a></li>
                <li class="item3"><a href="#">Three</a></li>
                <li class="item4"><a href="#">Four</a></li>
                <li class="item5"><a href="#">Five</a></li>
                <li class="item6"><a href="#">Six</a></li>

            </ul>

Each .itemx has a different background colour, so I need the active state to take into account the class.

Obviously something like:

                <li class="item6" id="active"><a href="#">Six</a></li>

#active.item6 {
background: red;
}

Would work but IE6 does开发者_如何学Cnt like chained items in CSS so doesnt work when other items are set out in the CSS.

Can I do this with jQuery where each item has a different background colour when 'active?

An element can have multiple classes, like this:

<li class="item6 active"><a href="#">Six</a></li>

Then you can create the normal and "active" versions:

.item6 {
  background: green;
}
.item6.active {
  background: red;
}

The second rule applies if it has both classes, then just .addClass(), .removeClass(), or .toggleClass() where needed. This isn't a jQuery thing, just a CSS thing...you're only using jQuery for the class add/remove portion, the CSS part works without JavaScript at all.