jq给点击的当前元素添加样式 并移除其它同级元素的样式

我们经常看见网站有这种效果 如 你在网站有点击某个导航栏菜单 那么当前点击的菜单就会变成不同的样式(添加背景色之类的)用来区别你点击的是当前的菜单。 怎么实现的呢?其实很简单。。  

代码如下:


<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="./base64.js"></script>
    <script src="./jquery.js"></script>
<title>123</title>
    <style>
        .on{background-color: red;}
    </style>
</head>
<body>

<div  style="width: 100px; height: 100px; border: 1px solid red;">11111</div>
<div  style="width: 100px; height: 100px; border: 1px solid red;">22222</div>
<div  style="width: 100px; height: 100px; border: 1px solid red;">33333</div>

</body>

<script>

    //点击的时候给当前div添加样式,并移除其它同级div的样式
    $("div").click(function(){

	  //给当前点击的div添加样式 并移除和当前点击元素的所有同级元素的样式(但 并不包含当前所点击的这个元素)
      $(this).addClass('on').siblings().removeClass('on');


        //$(this).siblings().addClass('on');
    })
	
	//siblings() 匹配除了当前元素之外的所有 同辈(级)元素
	
</script>

</html>

注意:如果是a链接跳转的话  那这个代码就不好用了 因为a链接是跳转。。点击之后会直接刷新页面了。。所以这个就不好用了。。除非a链接点击后不会跳转 也就是取消a链接的默认跳转行为 或者让a链接的href属性没有值


声明:禁止任何非法用途使用,凡因违规使用而引起的任何法律纠纷,本站概不负责。

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

精彩评论

全部回复12人评论7,777人参与