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()点击对象的索引值。