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

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

代码如下：

html>

123

.on{background-color: red;}

11111

22222

33333

//点击的时候给当前div添加样式,并移除其它同级div的样式

$("div").click(function(){

//给当前点击的div添加样式 并移除和当前点击元素的所有同级元素的样式(但 并不包含当前所点击的这个元素)

$(this).addClass('on').siblings().removeClass('on');

//$(this).siblings().addClass('on');

})

//siblings() 匹配除了当前元素之外的所有 同辈(级)元素

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

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