网页导航的点击及内容切换效果，web前端开发技巧

=============

导航是由 li 标签构成的，给每个 li 标签用循环加一个自定义属性，属性值为索引号 0-3 。一共四个导航块的内容分别放在四个 div 内部，div 的 display 设置为 none 隐藏，然后在蓝色区域是按标准流依次叠放在一起的，使用 queryselector 获取到每一个 div，于是每个div也有了与导航 li 标签相同对应的索引号0-3，最后用排他思想改变点击后的导航对应内容的 display 属性即可。

设置自定义属性使用 element.setAttribute ，获取自定义属性使用 element.getAttribute

改变内容区域代码：

var lis=document.querySelector(‘ul’).querySelectorAll(‘li’);

var divs=document.querySelector(‘.neirong’).querySelectorAll(‘div’);

for(var i=0;i<lis.length;i++){

lis[i].setAttribute(‘index’,i); //添加自定义属性index 索引

}

var index=this.getAttribute(‘index’); //获取当前点击的导航的索引号，之前有一个点击事件，此处没有打出，后面有完整代码

for(var i=0;i<divs.length;i++){

divs[i].style.display=‘none’;

}

divs[index].style.display=‘block’;

---

完整代码：

=====