简单tab切换代码

Posted 2020-09-25

htm代码：

<div>
<!-- tap切换 -->
<ul class="tab-g clearfix">
<li class="tab-gn active-gn">tap1</li>
<li class="tab-gn">tap2</li>
<li class="tab-gn">tap3</li>
</ul>
</div>
<!-- main-gn内的内容是切换的内容 -->
<div class="bottom clearfix">
<div class="products">
<div class="main-gn selected-gn"><img src="http://www.jq22.com/img/cs/500x300a.png" ><br>
内容一</div>
<div class="main-gn"><img src="http://www.jq22.com/img/cs/500x300b.png" ><br>
内容二</div>
<div class="main-gn"><img src="http://www.jq22.com/img/cs/500x300c.png" ><br>
内容三</div>
</div>
</div>

css代码：

.tab-g {
border-bottom:0;
height:36px;
}
.tab-g li {
list-style:none;
float:left;
height:34px;
margin-right:20px;
color:#909090;
line-height:34px;
text-align:center;
cursor:pointer;
}
.tab-g li.active-gn {
color:#50B400;
border-bottom:3px solid #50B400;
}
.bottom .products {
height:476px;
}
.bottom .products .main-gn {
display:none;
}
.bottom .products .main-gn.selected-gn {
display:block;
}

js代码：

$(function() {

// 国内旅游
//1. 给li注册mouseenter事件
$(".tab-gn").mouseenter(function() {
//2. 让当前li添加active类，并且让其他的li移除active类
$(this).addClass("active-gn").siblings().removeClass("active-gn");
//3. 让对应下标的div添加selected，并且让其他div移除selected类
var idx = $(this).index();
$(".main-gn").eq(idx).addClass("selected-gn").siblings().removeClass("selected-gn");
});
})