saber 酱的抱枕

Fly me to the moon

10/10
2015
学习

使用jq制作tab选项卡的切换效果

saber 撰写 无回复 2,181次查看

今天做网站要用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选项卡

我没有做自动切换功能，上图是手动切换。

使用jq制作tab选项卡的切换效果

04/6
2015
学习

通过传参进行tab选项卡切换一例

saber 撰写 单条回复 1,873次查看

看到别的网站，有的选项卡都是用传参的方式切换的，避免了代码重写，于是我也试着做了一个。


demo下载　　查看demo 

    <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只和样式有关。

通过传参进行tab选项卡切换一例