saber酱的抱枕

Fly me to the moon

10/10
08:00
学习

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

今天做网站要用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
12:35
学习

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

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


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选项卡切换一例