我们经常看见网站有这种效果 如 你在网站有点击某个导航栏菜单 那么当前点击的菜单就会变成不同的样式(添加背景色之类的)用来区别你点击的是当前的菜单。 怎么实现的呢？其实很简单。。
代码如下：
<!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属性没有值
声明：禁止任何非法用途使用，凡因违规使用而引起的任何法律纠纷，本站概不负责。
精彩评论