DRY - Sibling Elements

Question

Existe-t-il un moyen de raccourcir le code JS, besoin de lui dans JS vanilla pas Jquery.

Je ne peux pas utiliser le concept de fratrie Next et précédent ici. concept fonctionne previousElementSibling et nextElementSibling mais si la sélection est plus que 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

vous ne avez besoin d'un 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

Vous pouvez généraliser le code JS. De cette façon, même si vous ajoutez plus d'onglets, cela fonctionnera sans changer JS. Vérifiez le code ci-dessous.

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>