这是昨天的一个课堂练习,简单展示一下!做的是一个简单的页面交互效果,呈现一种内嵌效果。效果图如下:
首先直接看一下它的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>
感谢观看!