干-同級元素

Question

有沒有一種方法可以縮短JS代碼，需要在普通JS中而不是Jquery中使用。

我無法在此使用下一個和上一個兄弟姐妹的概念。 previousElementSibling和nextElementSibling概念有效，但是如果選擇量大於3怎么辦

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

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

  <table id="nav-table"> <tbody> <tr> <td id="network_tab" class="org_overview_tab active"><a href="#">Networks</a></td> <td id="network_tag_tab" class="org_overview_tab"><a href="#">Network tags</a></td> <td id="device_tab" class="org_overview_tab left-border"><a href="#">Devices</a></td> </tr> </tbody> </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代碼。 這樣，即使您添加更多選項卡，也可以在不更改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; } 

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