JQuery实现点击li标签改变样式class

最新推荐文章于 2024-05-16 16:57:53 发布

小明爱吃火锅

最新推荐文章于 2024-05-16 16:57:53 发布

阅读量2.1w

点赞数 6

分类专栏： javaweb 文章标签： jQuery li样式改变

本文链接：https://blog.csdn.net/qi_ming88/article/details/79461982

版权

javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文主要介绍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>

效果图：

小明爱吃火锅

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery实现点击li标签改变样式class

本文主要介绍JQuery实现点击li标签改变样式class，即点击li标签会取消当前的样式，然后赋给点击的li的样式。思路：对所有的 li的标签添加点击事件，然后利用siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选，去除同辈的样式，然后在给当前点击的li标签添加样式。测试代码如下：&lt;%@ page languag...
复制链接

扫一扫