js當前元素加樣式兄弟元素去掉（js修改元素樣式的方法）

本文目錄一覽：

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進行添加、刪除操作。

示例：

$(‘#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