JQuery实现点击li标签改变样式class
程序员文章站
2022-07-14 22:57:42
...
本文主要介绍JQuery实现点击li标签改变样式class， 即点击li标签会取消当前的样式，然后赋给点击的li的样式。
思路：对所有的 li的标签添加点击事件，然后利用siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选，去除同辈的样式，然后在给当前点击的li标签添加样式。
测试代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
.selected{font-weight:bold; background: #ff99cc; color:#fff;}
</style>
<script src="static/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#test li").click(function() {
alert("ddd");
$(this).siblings('li').removeClass('selected');
$(this).addClass('selected');
});
$(".btn").click(function(){
alert("ddd");
});
});
</script>
</head>
<body>
<ul id="test">
<li class="selected">A</li>
<li>B</li>
<li>C</li>
</ul>
<button class="btn">sss</button>
</body>
</html>效果图：