JQuery Tab_JQuery竖排页签代码示例

一个使用JQuery1.4.4开发的竖排页签选项卡(Tab)的代码示例，代码完整包已经加在附件中了，希望对大家有帮助：

HTML-Tab.html:

   

       
• 标签1

       
• 标签2

       
• 标签3

   

   

标签1下内容

   

标签2下内容

   

标签3下内容

 

CSS-tab.css

@CHARSET "UTF-8";
/*清除浏览器默认样式*/
* {
    margin:0px;
    padding:0px;
}
.container_style{
    width:500px;
    height:170px;
    display:block;
}
.li_area_style{
    width:100px;
    height:70px;
    background-color:white;
    float:left;
}
ul,li{
    margin:0px;
    padding:0px;
    list-style:none;
}
li{
    /*float:right;*/
    background-color:pink;
    margin-top:2px;
    width:100px;
    padding:5px;
    border:1px solid white;
    height:20px;
    color:white;
}
.listli{
    background-color:red;
    border:1px solid red;
}
.tab_area_style{
    width:400px;
    height:100px;
    background-color:white;
    border-top:0px;
    display:block;
    float:left;
}
.tab_area_style *{
    width:370px;
    height:100px;
    background-color:red;
    border-top:0px;
    color:white;
    display:none;
    margin-top:2px;
}
.content_area{
    display:block;
}

 

JS-tab.js

var timeout;
$(document).ready(
        function(){
            $("li").each(function(index){
                $(this).mouseover(function(){
                    timeout = setTimeout(function(){
                        $(".content_area").removeClass("content_area");
                        $(".listli").removeClass("listli");
                        $("#tab_area *").eq(index).addClass("content_area");
                        $("li").eq(index).addClass("listli");
                    },320);
                   
                });
                $(this).mouseout(function(){
                    clearTimeout(timeout);
                });
            });
        }
);