第一步：添加脚本和样式（css自行定义）
<link type="text/css" rel="stylesheet" href="css/tabs.css"/> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/tabs.js"></script>
第二步：写一个选项卡
<div class='tabs' id="tabs"> <ul class='horizontal'> <li rel="tab-1">information</li> <li rel="tab-2" relHref="T1.html">tab2</li> <li rel="tab-3" relHref="T2.html">tab3</li> </ul> <div rel='tab-1'> <span>Change the tab to see that there is an animation.</span> </div> <div rel='tab-2'> <span>Tab 2</span> </div> <div rel='tab-3'> <span>Tab 3</span> </div> </div>
注意：如果想默认第几个选项卡激活，直接添加有个class=”sekectActive”就好，如：
<li rel="tab-2" relHref="T1.html" class="selectActive">tab2</li>
注意，如果不是加载网页的形式relHref不用写，如果需要这个属性写你对应的网页地址
第三步：写一个执行一个初始化函数
<script type="text/javascript">tabs_takes.init("tabs");</script>tabs.js文件内容：
var tabs_takes={"init":function(containId){if(containId==null||containId==""){alert("id不能为空");return;}
$("#"+containId+">ul>li").on("click",function(){tabs_takes.tabItemTakes(containId,this)});var liActiveNumber=$("#"+containId+" ul li.selectActive").length;if(liActiveNumber>0){var liRel=$("#"+containId+">ul>li.selectActive").eq(0).attr("rel");$("#"+containId+">div").css("display","none");$("#"+containId+">div[rel='"+liRel+"']").css("display","block");var tabHrefRel=$("#"+containId+">ul>li.selectActive").eq(0).attr("relHref");if(tabHrefRel!=null&&tabHrefRel!=""){$("#"+containId+">div[rel='"+liRel+"']").load(tabHrefRel);}}else{var liRel=$("#"+containId+">ul>li").eq(0).attr("rel");$("#"+containId+">ul>li").eq(0).addClass("selectActive");$("#"+containId+">div").eq(0).css("display","block");var tabHrefRel=$("#"+containId+">ul>li").eq(0).attr("relHref");if(tabHrefRel!=null&&tabHrefRel!=""){$("#"+containId+">div[rel='"+liRel+"']").load(tabHrefRel);}}},"tabItemTakes":function(containId,thisObj){var tabRel=$(thisObj).attr("rel");$("#"+containId+">ul>li").removeClass("selectActive");$(thisObj).addClass("selectActive");$("#"+containId+">div").css("display","none");$("#"+containId+">div[rel='"+tabRel+"']").css("display","block");var tabHrefRel=$(thisObj).attr("relHref");if(tabHrefRel!=null&&tabHrefRel!=""){$("#"+containId+">div[rel='"+tabRel+"']").load(tabHrefRel);}}}
