本帖最后由 Amy 于 2018-12-29 16:35 编辑
【前端丨学习笔记】js实现列表中点击选中
【零基础学习web前端】教程目录导航
写列表时，会用到选中效果，选中的样式改变，同级的样式消失。实例
[HTML] 纯文本查看 复制代码 <html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li{
list-style-type: none;
}
li{
width: 100px;
line-height: 40px;
border: 1px solid #ccc;
}
.box_b{
background: #e5e5e5;
}
</style>
</head>
<body>
<ul class="box_list">
<li>苏飞论坛</li>
<li>苏飞论坛</li>
<li>苏飞论坛</li>
<li>苏飞论坛</li>
</ul>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.box_list li').click(function () {
$(this).addClass('box_b').siblings().removeClass('box_b')
});
});
</script>
</body>
</html>
点击前后效果：
| 
窥视卡
雷达卡
发表于 2018-12-29 16:35:59
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2018-12-29 16:47:05
