学习复习了一下tab栏
css排版我没有太注重
只是简单粗略的做了一下js
<table>
<ul>
<li class="li_on">商品介绍</li>
<li>规格与包装</li>
<li>售后</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</table>
<div class="box2">
<div class="item" style="display: block;">商品介绍模块</div>
<div class="item" style="display: none;">规格与包装模块</div>
<div class="item" style="display: none;">售后模块</div>
<div class="item" style="display: none;">商品评价模块</div>
<div class="item" style="display: none;">手机社区模块</div>
</div>
这里是script代码 var box1 = document.querySelectorAll('.box1') var lis = document.querySelectorAll('li') var items = document.querySelectorAll('.item') for (var i = 0; i < lis.length; i++) { // 按照for循环里的,为每一个li添加一个自定义属性index,并赋值 lis[i].setAttribute('index', i) lis[i].onclick = function () { for (var i = 0; i < lis.length; i++) { lis[i].className = '' } this.className = 'li_on' // 当点击这个模块的时候,获取一下点击的值,为下面显示什么模块铺垫 var index = this.getAttribute('index') for (var i = 0; i < items.length;i ++){ items[i].style.display= 'none' } items[index].style.display = 'block' } } 到这里