tab栏切换
当鼠标点击上面相应的选项卡(tab),下面内容也跟随变化。
【案例分析】
1:Tab栏切换与两个大的模块
2:上面的模块选项卡,点击某一个,当前这一个底色会变成红色,其他不变(排它思想) ,修改类名方式
3:下面的模块内容,会跟随上面的选项卡变化,所以下面模块变化写到点击事件里面。
4:规律:下面的模块显示内容和上面的选项卡一一对应,相匹配
5:核心思路:给上面的tab_list里面所以li添加自定义属性,属性值从0开始编号。
6:当我们点击tab_list里面的某个li,让tab_con里面对应序号的内容显示,其余隐藏(排他思想);
【HTML代码】
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(5000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
【CSS代码】
<style>
.tab{
background-color: gray;
height: 39px;
width: 800px;
margin: auto;
}
.tab_list li{
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
list-style: none;
}
.tab_list .current{
background-color: red;
color: #fff;
}
.item_info{
padding: 20px 0 0 20px;
}
.item{
display: none;
}
.tab_con{
float: left;
height: 639px;
width: 800px;
margin: auto;
}
</style>
【案例分析1和2点的JavaScript部分代码】
<script>
// 1:模块选项卡,点击某一个,当前这一个底色会变成红色,其他不变(排它思想) ,修改类名方式
// 获取元素
var tab_list = document.querySelector(".tab_list");
var lis = tab_list.querySelectorAll("li");
//绑定事件for循环
for(var i = 0;i< lis.length;i++){
lis[i].onclick = function(){
//其余的li清除格式,只保留当前这个li
for(var i = 0;i< lis.length;i++){
lis[i].className = '';
}
this.className = 'current';
}
}
</script>
【JavaScript总代码】
<script>
// 1:模块选项卡,点击某一个,当前这一个底色会变成红色,其他不变(排它思想) ,修改类名方式
// 获取元素
var tab_list = document.querySelector(".tab_list");
var lis = tab_list.querySelectorAll("li");
var items = document.querySelectorAll('.item');
//绑定事件for循环
for(var i = 0;i< lis.length;i++){
//开始给5个li设置索引号
lis[i].setAttribute('index',i);
lis[i].onclick = function(){
//其余的li清除格式,只保留当前这个li
for(var i = 0;i< lis.length;i++){
lis[i].className = '';
}
this.className = 'current';
// 2:下面的显示内容模块
var index = this.getAttribute('index');//获取索引号,找到对应的选项卡
for(var i = 0;i<items.length;i++){
items[i].style.display='none';
}
items[index].style.display='block';
}
}
</script>
【效果图】