Настройка HTML активна с другим цветом фона

Question

Вот мой список HTML:

            <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>

Каждый .itemx имеет свой цвет фона, поэтому мне нужно активное состояние, чтобы учесть class.

Очевидно, что-то вроде:

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

#active.item6 {
background: red;
}

Работало бы, но IE6 не любит связанные элементы в CSS, поэтому не работает, когда другие элементы представлены в CSS.

Можно ли сделать это с помощью jQuery, где каждый элемент имеет свой фоновый цвет, когда «активен»?

Answer 1

Элемент может иметь несколько классов, например:

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

Тогда вы можете создать обычную и «активную» версии:

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

Второе правило применяется, если оно имеет оба класса, тогда просто .addClass(), .removeClass() или .toggleClass() где необходимо. Это не jQuery, а просто CSS ... вы используете jQuery только для части добавления / удаления класса, часть CSS работает вообще без JavaScript.