<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab栏切换制作</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div.tab{
position:relative;
top:100px;
left:500px;
width:1200px;
height:550px;
}
div.tab_list{
height: 550px;
}
div.tab_con{
width: 1200px;
height: 508px;
}
div.item{
width:1200px;
height:508px;
}
div#con-1{
background-color:aqua;
}
div#con-2{
display: none;
background:seagreen;
}
div#con-3{
display: none;
background:hotpink;
}
div#con-4{
display: none;
background:wheat;
}
div#con-5{
display: none;
background:aquamarine;
}
ul{
display: inline-block;
width: 1200px;
height:40px;
border-bottom: 2px solid darkred;
}li{
display: inline-block;
list-style: none;
width:180px;
height:40px;
text-align: center;
line-height: 40px;
border:0px;
}
.current{
background:red;
color:white;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(1.1万+)</li>
<li>手机社区</li>
</ul>
<div class="tab_con">
<div class="item" id="con-1">商品介绍内容</div>
<div class="item" id="con-2">规格与包装内容</div>
<div class="item" id="con-3">售后保障内容</div>
<div class="item" id="con-4">商品评价(1.1万+)内容</div>
<div class="item" id="con-5">手机社区内容</div>
</div>
</div>
</div>
<script >
var tab_list=document.querySelector('.tab_list');
var lis=document.querySelectorAll('li');
var items=document.querySelectorAll('.item');
for(var i=0;i<lis.length;i++){
lis[i].setAttribute("index",i);
lis[i].onclick=function(){
for(var i=0;i<lis.length;i++){
/*1.控制li导航栏点击效果*/
lis[i].className='';
items[i].style.display='none'
}
this.className='current';
/*2.控制内容模块*/
var index=this.getAttribute('index');
items[index].style.display='block';
}
}
var tab_con=document.querySelector('.tab_con');
var div=document.querySelectorAll('tab_con');
</script>
</body>
</html>
0
|