如何通過'角色'屬性選擇元素並通過類與香草JS過濾？

-1

<ul> 
    <li role="presentation" class="active"> 
    <a href="#1" aria-controls="1" role="tab">How to Install for iPad</a> 
    </li> 
    <li role="presentation"> 
    <a href="#2" aria-controls="2" role="tab">How to Install for Mac</a> 
    </li> 
    <li role="presentation"> 
    <a href="#3" aria-controls="3" role="tab">How to Install for PC</a> 
    </li> 
</ul>

當我使用document.querySelectorAll（ '[角色= 「呈現」]'）;結果是陣列 [li.active，LI，LI]

如何刪除。主動類，並將其與純JS附加到任何其他這些鋰的W/O型的JQuery更簡單的方法？

來源

2017-10-09 mixa_ru

請包括你試過的[mcve]。你在這裏的工作順序不是問題。 – zzzzBov

你究竟想要達到什麼目的？你的問題聽起來像是你想隨機地將'.active'類移動到任何其他'li'元素上，但我猜這不是你真正想要的？ –

@JamesDonnelly，謝謝你的回覆！我的目標是從第一個li關閉.active，並將其設置爲最後一個li元素。 –

試試這個：

// remove active class from all elements 
document.querySelectorAll('[role="presentation"]').forEach(function (el){ 
el.classList.remove("active"); 
}); 

// add class 'active' to last element 
document.querySelectorAll('[role="presentation"]:last-of-type')[0].classList.add("active")

注：

'班級列表' 不會在IE9工作;
我認爲你必須修改添加類行，這取決於你的需求。

來源

2017-10-09 14:59:43

你可以嘗試這樣的事情：

var ele = document.querySelectorAll('[role="presentation"]'); 
ele[0].classList.remove("active"); //Remove active class for first element 
ele[ele.length- 1].classList.add("active"); //Apply active class for last element 
console.log(ele)

來源

2017-10-09 14:55:28

如何通過'角色'屬性選擇元素並通過類與香草JS過濾？

回答

相關問題