有一说一 学到jQuery了 比原生的JavaScript DOM操作好用太多了
<!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>
<script src="/jquery.mini.js"></script>
</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;
}
.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" >商品介绍模块内容</div>
<div class="items">规格与包装模块内容</div>
<div class="items">售后保障模块内容</div>
<div class="items">商品评价模块内容</div>
<div class="items">手机社区模块内容</div>
</div>
</div>
<script>
$(function(){
$('.items').eq(1).show().siblings().hide();
$('.tab_list li').click(function(){
$(this).addClass('current').siblings().removeClass('current');
index=index=$(this).index();
$('.items').eq(index).show().siblings().hide()
})
})
</script>
</body>
</html>