jquery简单几句代码就显示tab切换

Posted 2020-10-06 四毛小哥

 

html代码：

 

<div class="ry_jj_tab">
<div class="tab_box">
<a href="#tab1" class="selected" onclick="js_method();return false;">基本信息</a>
<a href="#tab2" onclick="js_method();return false;">荣誉与评价</a>
<a href="#tab3" onclick="js_method();return false;">代表业绩</a>
<a href="#tab4" onclick="js_method();return false;">社会活动</a>
<a href="#tab5" onclick="js_method();return false;">主要著述</a> </div>
<div class="tab_main tab_main1" id="tab1"> <!-- <span class="xx"></span> -->

<div class="tab_main_box"> {dede:field.jibenxinxi/} </div>
</div>
<div class="tab_main tab_main1" id="tab2" style="display: none;"> <span class="xx"></span>
<div class="tab_main_box"> {dede:field.rongyu/} </div>
</div>
<div class="tab_main tab_main1" id="tab3" style="display: none;"> <span class="xx"></span>
<div class="tab_main_box"> {dede:field.yeji/} </div>
</div>
<div class="tab_main tab_main1" id="tab4" style="display: none;"> <span class="xx"></span>
<div class="tab_main_box"> {dede:field.shehuihuodong/} </div>
</div>
<div class="tab_main tab_main1" id="tab5" style="display:none;"> <span class="xx"></span>
<div class="tab_main_box"> {dede:field.zhushu/} </div>
</div>
</div>

下面是js代码

<script>
$(document).ready(function(){

$(function(){
$(".tab_box > a").on("click",function(){//给.tab_box > a 这个对象绑定点击事件
var index = $(this).index();//获取到点击对象的索引值存到index这个变量中
$(this).addClass("selected").siblings().removeClass("selected");//点击对象高亮，同胞节点删除高亮
$(".tab_main1").eq(index).css("display","block").siblings(".tab_main1").css("display","none");//想要显示点击的内容，其他不节点内容隐藏
})
})

})
</script>

 

ps：以前一直不理解$(this)这个变量是干啥的，今天总算领悟到了，这个是当前事件的对象，index()索引值，$(this).index()点击对象的索引值。