本文目录一览：
- 1、js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框？
- 2、js如何给目标元素的兄弟元素更改样式
- 3、js代码addClass和removeClass写在同一句代码里面
- 4、求大神解释一段js代码，代码如下：
- 5、vue中点击div里的当前元素添加class删除其他兄弟元素的class？
- 6、JS 给一个li添加样式，同时去掉其他li的样式
js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框？
使用：.addClass(‘active’).siblings().removeClass(‘active’)；即可
解释：给当前选中的增加边框.addClass(‘active’)
给原先选中的取消边框.siblings().removeClass(‘active’)
详细如下：
style type=”text/css”
.clr:after{clear:both;display:block;overflow:hidden;height:0;content:”.”;}
.clr{zoom:1;}
.price{width:100%;}
.price a{width:100px;height:40px;line-height:40px;text-align:center;background:#eee;float:left;margin:0 5px;display:block;cursor:pointer;}
.price a.active{border:1px solid red;}
/style
div class=”price clr”
a5元/a
a10元/a
a100元/a
a200元/a
/div
script type=”text/javascript” src=”引用jquery.js或zepto.js”/script
script type=”text/javascript”
$(function(){
$(‘.price a’).click(function(){
$(this).addClass(‘active’).siblings().removeClass(‘active’);
});
});
/script
效果如下：
js如何给目标元素的兄弟元素更改样式
找到目标元素的父元素，再找到它的子元素即可：
目标元素.parentNode.childNode
然后再通过循环给每个元素更改样式即可。当然这里面也包括了目标元素，要不要排除掉就看你了
也可以直接找目标元素的兄弟元素，但这要分两步走：往前找和往后找，除非目标元素是所有兄弟里面的老大或老幺，倒不如通过老爸直接找到所有兄弟来得更快更方便。
js代码addClass和removeClass写在同一句代码里面
亲，这句话的意思是给当前的这个元素添加一个class，同时把他的兄弟元素的这个class全部去掉的意思
求大神解释一段js代码，代码如下：
切换当前jquery对象的class属性为currentDd, 并且把它的兄弟节点的class为subNav的节点移除掉样式
currentDd
vue中点击div里的当前元素添加class删除其他兄弟元素的class？
toggleClass方法可以实现对某一class进行添加、删除操作。
示例：
1
$(‘#test’).toggleClass(‘className’);
上面的代码将会依次为id为test的元素添加/删除名为className的class，如果test元素存在className，则删除className，如果不存在则添加className。
toggleClass的用法如下：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
.toggleClass( className )
className
类型: String
在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。
JS 给一个li添加样式，同时去掉其他li的样式
script type=”text/javascript” defer=”defer”
function changeStyle(ele){
var liAry=document.getElementById(“box”).getElementsByTagName(“li”);
var liLen=liAry.length;
var liID=ele.id;
for(var i=0;iliLen;i++)
{
if(liAry[i].id==liID)
{
liAry[i].style.backgroundColor=”#cccccc”;
}
else
{
liAry[i].style.backgroundColor=”white”;
}
}
}
/script
div id=”box”
li id=’1′ style=”background-color:#cccccc;” onclick=”changeStyle(this)”AAA/li
li id=’2′ onclick=”changeStyle(this)”BBB/li
li id=’3′ onclick=”changeStyle(this)”CCC/li
/div
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/311097.html
微信扫一扫 
支付宝扫一扫 