<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab栏切换</title>
<script src="js/jquery-3.5.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
display: flex;
width: 900px;
margin: 30px auto;
flex-direction: column;
}
.tab .tab_list ul {
display: flex;
width: 100%;
height: 50px;
box-sizing: border-box;
flex-direction: row;
}
.tab .tab_list ul li {
flex: 1;
height: 100%;
display: flex;
text-align: center;
align-items: center;
padding-left: 50px;
background-color: pink;
border-left: 1px solid red;
border-top: 1px solid red;
cursor: pointer;
}
.tab .tab_list ul li:last-child {
border-right: 1px solid red;
}
.tab .tab_list ul .current {
color:white;
background-color: red;
}
.tab_con {
height: 300px;
border: 1px solid red;
}
.item {
display: none;
}
</style>
</head>
<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="item" style="display: block">
商品介绍#########################
</div>
<div class="item">
规格与包装#######################
</div>
<div class="item">
售后保障#########################
</div>
<div class="item">
商品评价************************
≉<br>******************
*****************
</div>
<div class="item">
手机社区#########################
</div>
</div>
</div>
<script>
$('.tab_list ul li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
$('.tab_con .item').eq($(this).index()).show().siblings().hide();
})
</script>
</body>
</html>
