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()点击对象的索引值。
jquery简单几句代码就显示tab切换
原文地址：http://www.cnblogs.com/simaoxiaoge/p/7508102.html