先看效果：
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>