イベントターゲット - nextSibling内のクラス名を使用してすべてのdivをターゲティングしますか？

Question

初めての方へ

クリックしたときにリンクセットのtabIndexが0に設定されています...それを正確にどのようにターゲットするかは分かりません。

例：私は#Aをクリックしたとき#Bでクラス「リンク」を持つすべてのdivをターゲットにする方法を

<div id="a">Link</div> 
<div id="b"> 
    <div class="link" tabIndex="-1">Link 1</div> 
    <div class="link" tabIndex="-1">Link 2</div> 
    <div class="link" tabIndex="-1">Link 3</div> 
</div> 

イム探しイオン。

アドバイスありがとうございます。

Answer 1

すでに与えられた答えに加えて可能性/利用できる場合、私はAを活用して、より意味のマークアップを使用することをお勧めしてください現代のDOM。

function nullifyTabIndex(elmNode) { 
 
    elmNode.setAttribute('tabindex', 0); 
 
} 
 
function handleNullifyTabIndices(evt) { 
 
    var 
 
    tabItemList = document.body.querySelectorAll('#b > li'); 
 

 
    tabItemList.forEach(nullifyTabIndex); 
 
} 
 
function registerHandlingOfTabindexChange(evt) { 
 
    var 
 
    elmTrigger = document.body.querySelector('#a'); 
 

 
    elmTrigger.addEventListener('click', handleNullifyTabIndices, false); 
 
} 
 
document.addEventListener('DOMContentLoaded', registerHandlingOfTabindexChange, false);

<a href="#" id="a">Trigger Tab Index Change</a> 
 
<nav> 
 
    <ul id="b"> 
 
    <li tabindex="-1"><a href="#">Link 1</a></li> 
 
    <li tabindex="-1"><a href="#">Link 2</a></li> 
 
    <li tabindex="-1"><a href="#">Link 3</a></li> 
 
    </ul> 
 
</nav>

Answer 2

以下はあなたに役立ちます。

HTML：

<div id="a">Link</div> 
<div id="b"> 
    <div class="link" tabIndex="-1">Link 1</div> 
    <div class="link" tabIndex="-1">Link 2</div> 
    <div class="link" tabIndex="-1">Link 3</div> 
</div> 

JS：

<script> 
window.onload = function() { test() }; //Call the test function below on load 

function test() { 
    document.getElementById("a").addEventListener("click", updateAttribute); //attach event listener to div with id "a" 
} 

function updateAttribute() 
{ 
    var ele = document.getElementsByClassName("link"); //Get all div elements with class name "link" under div "b" 

    for(var i = 0; i < ele.length; i++) //Loop through all div elements and set attribute "tabIndex" to "0" 
     ele[i].setAttribute("tabIndex", "0"); 
} 
</script>