`

JQuery Tab_JQuery竖排页签代码示例

JQuery Tab 页签 选项卡 WEB 
阅读更多

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

HTML-Tab.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/JQuery/jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/JQuery/jquery/js/tab.js"></script>
<link href="/JQuery/jquery/css/tab.css" type="text/css" rel="stylesheet">
<title>JQuery竖排页签</title>
</head>
<body>
<div id="container" style="container_style">
<div id="li_area" class="li_area_style">
    <ul id="ul_area" class="ul_area_style">
        <li class="listli">标签1</li>
        <li >标签2</li>
        <li >标签3</li>
    </ul>
</div>
<div id="tab_area" class="tab_area_style">
    <div class="content_area">标签1下内容</div>
    <div>标签2下内容</div>
    <div>标签3下内容</div>
</div>
</div>
</body>
</html>

 

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);
                });
            });
        }
);

 

效果图：

0
顶
0
踩
分享到：
| 推荐10款非常优秀的HTML5开发工具
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics