网站SEO优化教程|技术分享|源码分享

本博客文章均是作者原创,记录码砖的点点滴滴,不介意搬砖,希望大家转载注明出处,感谢ing……




动态添加类绑定点击事件


 2020-12-24 15:24:00  浏览量:(425)   标签: 导航栏变色  点击变色  js点击导航变色 




	<ul id="nav" style="width:150px;">

		<li class='list'>
		    <a href="home.html" target="frame" >管理员</a>
		</li>
		<li class='list'>
		    <a href="home.html" target="frame" >客户管理</a>
		</li>
		<li class='list'>
			<a href="home.html" target="frame" >企业管理</a>
		</li>
		<li class='list'>
		    <a href="home.html" target="frame" >通讯录管理</a>
		</li>

	</ul>
<script>
void function () {
  console.clear();
  document.getElementsByClassName('list')[0].classList.add('avr');
}();

const menuItems = Array.from(document.querySelectorAll('.list'));
menuItems.forEach(item => {
  item.addEventListener('click', e => {
    menuItems.forEach(item => {
      item.classList.remove('avr');
    });
    e.currentTarget.classList.add('avr');
  });
});
</script>


如文章内容失效请联系作者更新,感谢ing,如有任何疑问点击网站提问按钮;

本文由【日韩赶SEO】原创,转载请注明出处,违者必究:http://4asport.com/post/113.html

提问 刷新 ^

友情链接:A5源码

Copyright ?2019 【日韩赶SEO】京ICP备25252500号