先看效果：
html布局部分
<div class="container"> <ul> <li><a href='#'>第一栏</a></li> <li><a href='#'>第二栏</a></li> <li><a href='#'>第三栏</a></li> <li><a href='#'>第四栏</a></li> <li><a href='#'>第五栏</a></li> </ul> /* <div style="clear: both;"></div>*/ <div class="box box1"> 第一大模块 </div> <div class="box"> 第二大模块 </div> <div class="box"> 第三大模块 </div> <div class="box"> 第四大模块 </div> <div class="box"> 第五大模块 </div>
红色部分是下面JS所需获取的部分
前面可以自己可以修改样式
这里就不演示了。
主要说一下script部分
首先要对需要用到的元素进行获取
这里面要获取五个li标签和五个div标签
var lis = document.querySelector('ul').querySelectorAll('li'); console.log(lis); var boxs = document.querySelectorAll('.box'); console.log(boxs);
显示正常即可
因为我们是点击每一个li标签对每一个div进行切换效果
所以我们要先获取每个li的点击事件：
for (var i = 0; i < lis.length; i++) { lis[i].addEventListener('click', function() {触发什么事件} }
然后得让他点击哪个盒子哪个li就发生什么变化 其他的li看不见
在点击事件里面写个循环
for (var i = 0; i < lis.length; i++) { lis[i].className = ''; } this.className = 'current';
在点击事件上方写入
lis[i].setAttribute('index',i);
给每个li创建一个新的index索引号然后定义一个变量接收
在this.className = 'current'下方写入
var index=this.getAttribute('index');
最后获取div盒子里的索引号把点击的盒子给显示出来，也是用到排他思想
for (var i = 0; i < boxs.length; i++) { // 先把每个div盒子给隐藏起来 boxs[i].style.display='none'; } boxs[index].style.display = 'block'
最后附上完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tba</title> <style type="text/css"> * { padding: 0; margin: 0; } ul li { list-style-type: none; float: left; width: 20%; box-sizing: border-box; height: 50px; } .current { box-shadow: 5px 5px 3px black; font-size: 20px; } li a { display: block; text-decoration: none; color: #000000; text-align: center; line-height: 50px; height: 50px; background-color: #00FFFF; margin: 1px; border-radius: 5%; } .box { text-align: center; line-height: 500px; font-size: 50px; margin-top: 10px; width: 100%; height: 500px; /* display: none; */ border: 1px solid black; box-sizing: border-box; display: none; } .box1 { display: block; } </style> </head> <body> <div class="container"> <ul> <li><a href='#'>第一栏</a></li> <li><a href='#'>第二栏</a></li> <li><a href='#'>第三栏</a></li> <li><a href='#'>第四栏</a></li> <li><a href='#'>第五栏</a></li> </ul> <div style="clear: both;"></div> <div class="box box1"> 第一大模块 </div> <div class="box"> 第二大模块 </div> <div class="box"> 第三大模块 </div> <div class="box"> 第四大模块 </div> <div class="box"> 第五大模块 </div> <script type="text/javascript"> // 首先先获取需要使用的元素 var lis = document.querySelector('ul').querySelectorAll('li'); console.log(lis); var boxs = document.querySelectorAll('.box'); console.log(boxs); for (var i = 0; i < lis.length; i++) { // 设置索引 lis[i].setAttribute('index',i); // 对每个li设置点击事件 lis[i].addEventListener('click', function() { // 当每个li被点击过后，其他的样式全部清除，只留下一个当前点击的样式(阴影样式)，这里用到排他思想(去除所有的，只保留自己) for (var i = 0; i < lis.length; i++) { // 点击过后清除所有的li的样式 lis[i].className = ''; } // 只显示当前点击的li样式 this.className = 'current'; // 给每个li创建一个新的index索引号 // 然后定义一个变量接收 var index=this.getAttribute('index'); for (var i = 0; i < boxs.length; i++) { // 先把每个div盒子给隐藏起来 boxs[i].style.display='none'; } // 最后获取div盒子里的索引号把点击的盒子给显示出来，也是用到排他思想 boxs[index].style.display = 'block' }) } </script> </body> </html>
