菜单导航
2019-10-09 本文已影响0人
王远清orz
<style>
li{
float: left;
list-style: none;
margin-right: 10px;
padding: 5px 15px;
background: #eee;
}
a{
text-decoration: none;
}
.current{
background: lightsalmon;
}
</style>
<body>
<div id="menu">
<ul>
<li class="current"><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">内容1</a></li>
<li><a href="javascript:void(0)">内容2</a></li>
<li><a href="javascript:void(0)">内容3</a></li>
<li><a href="javascript:void(0)">内容4</a></li>
<li><a href="javascript:void(0)">内容5</a></li>
</ul>
</div>
<script>
// 1.找到最上层父级元素
var menu = document.getElementById('menu');
// 2.ul是menu第一个子元素
var ul = menu.firstElementChild;
for (var i = 0; i<ul.children.length;i++){
//3. 找到ul中所有的li元素
var li = ul.children[i];
//4. 找到li中的a元素
var link = li.firstElementChild;
//给每个a注册点击事件
// 这里是吧函数赋值给onclick，不是调用clickLink()函数；
link.onclick = clickLink;
}
function clickLink() {
//让其他的li取消移除current类名；
for( var i = 0 ; i < ul.children.length; i++){
var li = ul.children[i];
li.classList.remove('current');
}
this.parentNode.classList.add('current');
}
</script>
</body>
children是获取子元素节点，孙元素节点不获取，有兼容性问题,IE9以上，兼容处理方法可以查找MDN文档
childNodes是获取子节点，孙节点不获取
parentNode 获取父节点，一般也是父元素
