<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<style>
.abc {
background-color: red
}
</style>
<script>
onload = function() {
var lis = document.querySelectorAll("ul li")
for (var i = 1 i < lis.length i += 4) {
lis[i].className = "abc"
if (lis[i + 1]) {
lis[i + 1].className = "abc"
}
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
如下：
1、HTML结构：设计三个li元素
<ul id="test">
<li>Glen</li>
<li>Tane</li>
<li>John</li>
</ul>
2、css样式：设计一个类selected，表示选中后的效果
<style>
.selected{font-weight:boldbackground: #ff99cccolor:#fff}
</style>
3、jquery代码：
$(function(){
$("#test li").click(function() {
$(this).siblings('li').removeClass('selected') // 删除其他兄弟元素的样式
$(this).addClass('selected') // 添加当前元素的样式
})
})
4、效果演示：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）