这是昨天的一个课堂练习，简单展示一下！做的是一个简单的页面交互效果，呈现一种内嵌效果。效果图如下：
首先直接看一下它的js代码吧，在不一样的皮囊里藏着千篇一律的灵魂，主要是要体会从中的for循坏绑定点击事件。
// 获取元素// var lis = document.querySelector('.tab_list').querySelectorAll('li');var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var contentBoxs = document.querySelectorAll('.contentBox');// for 循环绑定点击事件for (var i = 0; i < lis.length; i++) {// 开始给5个小li设置索引号 lis[i].setAttribute('index', i);// 1.上面的模块选项卡lis[i].onclick = function () {// 清除所有 其余的li清除 class 这个类for (var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下current盒子this.className = 'current';// 2.下面的显示内容模块var index = this.getAttribute('index');// console.log(index);// 清除所有 让其余的contentBox 这些div隐藏for (var j = 0; j < contentBoxs.length; j++) {contentBoxs[j].style.display = 'none';}// 清除之后 让对应的contentBox 显示出来contentBoxs[index].style.display = 'block';}}
布局和样式就直接放在一起了哈！
<style>body {width: 1410px;margin: 0 auto;}.tabBox {height: 60px;background: #f59f9f;}.tab_list {list-style: none;display: flex;}.tab_list li {width: 100%;height: 60px;text-align: center;line-height: 60px;background: #cdee71;max-width: 220px;}.tab_list li:hover {color: #e41e1e;background: #f59f9f;}.contentBox {width: 1410px;height: 500px;background: #c5d2e4;display: none;}.contentBox P {margin: 0;padding: 0;}</style><body><div class="tabBox"><ul class="tab_list"><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评论(5000+)</li><li>手机社区</li></ul></div><div class="allBoxes"><div class="contentBox"><p>我是商品介绍</p></div><div class="contentBox"><p>规格与包装</p></div><div class="contentBox"><p>售后保障</p></div><div class="contentBox"><p>商品评论</p></div><div class="contentBox"><p>手机社区</p></div></div></body>
感谢观看！
