Question

有没有办法缩短JS代码，需要它在vanilla JS而不是Jquery。

我无法在此处使用Next和之前的兄弟概念。 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>

干 - 兄弟元素

2 个答案: