Javascript：控制Li选中项样式

最新推荐文章于 2022-04-11 16:10:14 发布

原创最新推荐文章于 2022-04-11 16:10:14 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #class #jquery #html

JavaScript 专栏收录该内容

94 篇文章

订阅专栏

本文介绍了一种使用HTML和jQuery实现的选择类型筛选功能的方法。通过具体的代码示例，展示了如何创建可选的类别列表，并利用jQuery来为这些选项添加交互效果。当用户点击某个选项时，将该选项标记为选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图样式：

二、HTML内容：

<ul id="style"> <li class="filterName">选择类型AAA：</li> <li><a>全部 </a></li> <li><a id="0">选项AAAAA</a></li> <li><a>选项BBBBB</a></li> </ul> <ul id=""> <li class="filterName">选择类型BBB：</li> <li><a>全部</a></li> <li><a>选项AAAAA</a></li> <li><a>选项BBBBB</a></li> </ul> <ul id=""> <li class="filterName">选择类型CCC：</li> <li><a>全部</a></li> <li><a>选项AAAAA</a></li> <li><a>选项BBBBB</a></li> <li><a>选项CCCCC</a></li> </ul>

三、用到的javascript方法：

1.引入jQuery库：

2.样式控制方法：

四、选中项的样式：

.selected { background-color:#F00; }