若干个div，点击其中任意一个添加背景色，且只有当前被点击的div有背景色

最新推荐文章于 2023-06-20 21:42:28 发布

otatoz

最新推荐文章于 2023-06-20 21:42:28 发布

阅读量2.6k

点赞数 1

分类专栏： jQuery 文章标签： jquery 导航栏高亮 siblings()

本文链接：https://blog.csdn.net/qq_42720683/article/details/89373778

版权

jQuery 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

先看效果图：

作用：制作导航栏的点击高亮效果

知识点：

siblings() 方法返回被选元素的所有同级元素

语法：$(selector).siblings()

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
        <!-- 引入jquery -->
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<script>
    $(function(){
    	$('.wrapper').on('click','div',function(){
    		$(this).addClass('clickstyle');
    		$(this).siblings().removeClass('clickstyle');
    	})
	})
</script>
<style>
    .clickstyle{
    	background-color: red;
    }
    .wrapper .one{
    	border: 1px solid #ccc;
    	height: 100px;
    	width: 100px;
    }
</style>
<body>
    <div class="wrapper">
    	<div class="one"></div>
    	<div class="one"></div>
    	<div class="one"></div>
    </div>
</body>
</html>