JQuery Tab_JQuery竖排页签代码示例

最新推荐文章于 2023-08-08 09:41:16 发布

FruitHardCandy

最新推荐文章于 2023-08-08 09:41:16 发布

阅读量3k

点赞数

分类专栏： WEB前端开发文章标签： jquery function class float border div

本文链接：https://blog.csdn.net/FruitHardCandy/article/details/7238749

版权

WEB前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个使用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);
                });
            });
        }
);

FruitHardCandy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery Tab_JQuery竖排页签代码示例

一个使用JQuery1.4.4开发的竖排页签选项卡(Tab)的代码示例，代码完整包已经加在附件中了，希望对大家有帮助：HTML-Tab.html:JQuery竖排页签标签1 标签2 标签3 标签1下内容标签2下内容标签3下内容
复制链接

扫一扫