代码之家 › 专栏 › 技术社区 › Deepika Rao

干-同级元素

dry javascript

-1

Deepika Rao · 技术社区 · 8 年前

有没有办法缩短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>

2 回复 | 直到 8 年前

Frank Wisniewski 8 年前

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

Mahesh Hegde 8 年前

您可以概括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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前