<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale= di">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.tab{
background-color: ;
}
.tab_list{
border-bottom: 2px solid rgb(241,74,55);
background-color: rgb(245,248,245);
line-height: 38px;
}
ul{
width: 988px;
height: 38px;
line-height: 38px;
list-style: none;
}
ul li{
display: inline-block;
padding-left:35px;
width: 100px;
height: 100%;
cursor: pointer;
}
.items{
display: none;
}
.current{
background-color: rgb(241,74,55);
color: #fff;
}
</style>
<body>
<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="items" style="display: block;">商品介绍模块内容</div>
<div class="items">规格与包装模块内容</div>
<div class="items">售后保障模块内容</div>
<div class="items">商品评价模块内容</div>
<div class="items">手机社区模块内容</div>
</div>
</div>
<script>
var lis=document.querySelector('.tab_list').querySelectorAll('li');
var tabs=document.querySelector('.tab_con').querySelectorAll('div');
console.log(tabs);
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++){
lis[i].className='';
}
this.className='current';
var index= this.getAttribute('index');
for(var i=0;i<tabs.length;i++){
tabs[i].style.display='none';
}
tabs[index].style.display='block';
}
}
</script>
</body>
</html>
通过html css javascript实现仿京东tab栏
猜你喜欢
转载自blog.csdn.net/weiyuyang250/article/details/120715171
今日推荐
周排行