10/10
2015
今天做网站要用tab选项卡效果，我写了之后封装成了函数，放上来备用。
<div class="tabtitle clearfix">
<a href="" class="active">五星服务</a>
<a href="">医院环境</a>
<a href="">先进设备</a>
<a href="">公益活动</a>
</div>
<div class="tabmain">
<div class="tabmlist">五星服务</div>
<div class="tabmlist">医院环境</div>
<div class="tabmlist">先进设备</div>
<div class="tabmlist">公益活动</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script>
function setTab (titlist,mainlist,className) {
titlist.mouseover(function () {
mainlist.eq(titlist.index(this)).siblings().hide();
mainlist.eq(titlist.index(this)).show();
titlist.eq(titlist.index(this)).addClass(className);
titlist.eq(titlist.index(this)).siblings().removeClass(className);
});
mainlist.eq(0).siblings().hide();
mainlist.eq(0).show();
}
setTab($(".tabtitle a"),$(".tabmlist"),"active");
</script>
如果想要不修改而直接使用代码，要注意元素的层级关系，列表的主体部分和标题部分不要处于同一层级。
事件绑定之后，把内容部分先进行了显示隐藏的处理，就是显示第一个，隐藏其余几个。其实如果css设置的好，没必要这么做。
效果图：
我没有做自动切换功能，上图是手动切换。
使用jq制作tab选项卡的切换效果
04/6
2015
看到别的网站，有的选项卡都是用传参的方式切换的，避免了代码重写，于是我也试着做了一个。
<script type="text/javascript">
function setTab (tabTitId,tabPre,tabNum) {//参数是tab标题的id，本组tab的公共前缀，本组tab的个数。
//把字符串传参的时候，要加单引号。不是字符串也不是数字的时候，传递的是页面的元素。
for (var i = tabNum; i > 0; i--) {
document.getElementById(tabPre+i+"_tit").className="tab_Tit_off";//所有标题设置className
document.getElementById(tabPre+i+"_box").style.display="none";//隐藏所有box
};
document.getElementById(tabTitId).className="tab_Tit_on";//对当前标题设置className
document.getElementById(tabTitId.replace("tit","box")).style.display="block";//显示当前标题对应的box
}
setTab('tab1_1_tit','tab1_',4);//页面载入后对第一个tab执行一次
setTab('tab2_1_tit','tab2_',3);//页面载入后对第一个tab执行一次
</script>
选项卡标题和内容的id使用相同的前缀和有规律的序号，再把当前标题的id、选项卡的前缀、个数传递到函数里。class只和样式有关。
