JQuery Tab_JQuery竖排页签代码示例

水果硬糖

浏览: 576489 次
性别:
来自: 杭州

最近访客更多访客>>

halo_2

cjt_hehe

lh0593

mm123mzp

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 大家一起JS
浏览量：214538

文章分类

社区版块

存档分类

博客分类：

javascript

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

效果图：

jquery-listTab.rar (27.1 KB)
下载次数: 294

0
顶

0
踩

分享到：

CSS选择器优先级问题 | 推荐10款非常优秀的HTML5开发工具

2012-02-07 11:05
浏览 6002
评论(0)
分类:Web前端
查看更多

发表评论

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