<java>js动态生成的li添加js选择事件_li 选择按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/newclassgood/article/details/104017179

本文介绍了如何在JavaScript中为动态生成的li元素添加选择事件。选择事件是当用户点击某个选项时，通过改变样式来表示已被选择的状态。通过在click事件中切换li的active类，结合CSS实现高亮显示，从而达到选择效果。

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

js选择事件

本人前端比较一般，希望大佬指点。

选择事件是什么？
通俗来讲，选择事件就是指当你通过鼠标点击选择后，通过改变样式来表现选取的样子。
比如，我们点击某某菜单，选择的子菜单的属性就会有被选择的表现：

那怎么达到这种效果呢？

2.选择事件如何实现
本人用的eclipse，首先你需要一个分类菜单，通过分类点击后展示的标签，通过js动态加载标签，这些就不多说了，以下主要当做一个载体。

<dt class="active">分类筛选</dt>
			<dd style="display: none;">
				<div class="yh-mycenter-list xz-tab" id="lableList" style="list-style:none;">
				</div>
			</dd>

接着就是我们的主角，选择事件了，这个其实非常简单，就是通过click点击后给li的类名中添加active，并且删除其他的active，为什么怎么做呢？接着往下看吧。

<script type="text/javascript">
		//选择
			$(".xz-tab li").click(function(){
				$(this).addClass("active").siblings('li').removeClass("active")
			});
		</script>

接下来是引用的css文件，通过样式的控制把类名有active的标签更改颜色来达到选中的效果最重要的就是这句：
.yh-mycenter-list li.active { color:#0099ff; background:#fff; border:1px solid #0099ff;}

.yh-mycenter-list li { width:21%; height:0.8rem; padding:0.1rem; font-size:0.24rem; color:#333; text-align:center; background:#efefef; border:1px solid #efefef; margin:0.1rem 2%; border-radius:0.1rem; float:left;}
.yh-mycenter-list li.active { color:#0099ff; background:#fff; border:1px solid #0099ff;}