DRY

Question

有没有办法缩短 JS 代码，需要在 vanilla 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

可以泛化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>

Answer 2

你只需要一个 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');
  }
});

DRY - 兄弟元素

DRY - Sibling Elements

javascript