移动端的tab栏切换

头部需要进入

<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是必须的

 

转载于:https://www.cnblogs.com/Progress-/p/11422147.html