DRY - 兄弟要素

Question

JSコードを短縮する方法はありますか？バニラJSではJqueryでなくてもかまいません。

ここでは、次の兄弟概念と以前の兄弟概念は使用できません。 previousElementSiblingとnextElementSiblingコンセプトの作品が、選択はあなたがJSコードを一般化することができ、より3

\t document.getElementById("network_tab").addEventListener("click", function(){ 
 
\t \t this.classList.add('active'); 
 
\t \t document.getElementById("network_tag_tab").classList.remove('active'); 
 
\t \t document.getElementById("device_tab").classList.remove('active'); 
 
\t }); 
 
\t 
 
\t document.getElementById("network_tag_tab").addEventListener("click", function(){ 
 
\t \t this.classList.add('active'); 
 
\t \t document.getElementById("network_tab").classList.remove('active'); 
 
\t \t document.getElementById("device_tab").classList.remove('active'); 
 
\t }); 
 

 
\t document.getElementById("device_tab").addEventListener("click", function(){ 
 
\t \t this.classList.add('active'); 
 
\t \t document.getElementById("network_tag_tab").classList.remove('active'); 
 
\t \t document.getElementById("network_tab").classList.remove('active'); 
 
\t }); \t

.active{ 
 
border: 5px solid black; 
 
padding: 10px; 
 
}

\t \t <table id="nav-table"> 
 
\t \t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td id="network_tab" class="org_overview_tab active"><a href="#">Networks</a></td> 
 
\t \t \t \t <td id="network_tag_tab" class="org_overview_tab"><a href="#">Network tags</a></td> 
 
\t \t \t \t <td id="device_tab" class="org_overview_tab left-border"><a href="#">Devices</a></td> 
 
    
 
\t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table>

Answer 1

一つだけのEventListenerを必要とする...

document.getElementById('nav-table').addEventListener('click', e => { 
    if (e.target.nodeName== 'A'){ 
    document.querySelector('.active').classList.remove('active'); 
    e.target.parentNode.classList.add('active'); 
    } 
}); 

Answer 2

ということであれば何。そうすれば、タブを追加してもJSを変更せずに動作します。以下のコードを確認してください。

var tabs = document.querySelectorAll('.org_overview_tab'); 
 
for(var index=0;index<tabs.length;index++) { 
 
    tabs[index].addEventListener('click', function(){ 
 
    document.querySelector('.active').classList.remove('active'); 
 
    this.classList.add('active'); 
 
}); 
 
}

.active{ 
 
border: 5px solid black; 
 
padding: 10px; 
 
}

\t \t <table id="nav-table"> 
 
\t \t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td id="network_tab" class="org_overview_tab active"><a href="#">Networks</a></td> 
 
\t \t \t \t <td id="network_tag_tab" class="org_overview_tab"><a href="#">Network tags</a></td> 
 
\t \t \t \t <td id="device_tab" class="org_overview_tab left-border"><a href="#">Devices</a></td> 
 
    
 
\t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table>