Saber 酱的抱枕

今天做网站要用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选项卡的切换效果