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的情况下工作。

HTML设置使用不同的背景颜色激活

1 个答案: