頭部需要進入
<link rel="stylesheet" type="text/css" href="css/pingjia.css"/> //自己寫的css樣式，對細節進行微調
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
HTML部分
tab欄上面的部分
<div class="nav">
<div class="tab border-b">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="curr">商品詳情</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >會員評價</a>
</div>
</div>
tab下面與之對應的內容區域
<div class="content">
<ul>
<li style="display: block">商品介紹</li>
<li >會員評價的內容</li>
<ul>
</div>
JQuery部分
<script type="text/javascript" charset="utf-8">
$(".tab a").click(function() {
$(this).addClass('curr').siblings().removeClass('curr'); //點擊那個a標簽，給他添加類型，同時給他的兄弟移除類名（排他思想）
var index = $(this).index(); //獲取你點擊a標簽的索引，為了下面的小li跟着變化
$('.nav .content li').hide(); // 讓每一個小li先進行隱藏
$('.nav .content li:eq(' + index + ')').show(); //讓小的的eq表示第幾個元素進行顯示，HTML中默認讓第一個小li進行顯示（dispaly：block）
});
</script>
部分css樣式
/* tab區域 */
div, input, textarea, button, a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
ul, li, ol{
list-style: none;
}
ul{
margin-bottom: 0;
}
a {
color: #323232;
outline-style: none;
text-decoration: none;
}
.border-b {
position: relative;
}
.border-b:after {
top: auto;
bottom: 0;
}
.border-t:before, .border-b:after {
content: '';
position: absolute;
left: 0;
background: #ddd;
right: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.nav {
background-color: #fff;
text-align: center;
}
.nav .tab {
width: 100%;
position: relative;
overflow: hidden;
}
.tab a {
float: left;
width: 49%;
height: 2.56rem;
line-height:2.56rem;
display: inline-block;
border-right: 1px solid #e1e1e1;
text-align: center;
}
.tab a:last-child {
border-right: 0;
}
.tab .curr {
border-bottom: 2px solid #F8007A;
color: #E12F32;
}
.content ul{
padding: 0;
margin-top: 0.3125rem;
}
.content ul li {
display: none;
width: 94%;
text-align: start;
}
/* tab結束 */
補充說明:
:eq() 選擇器選取帶有指定 index 值的元素。
index 值從 0 開始，所有第一個元素的 index 值是 0（不是 1）。index是必須的