JQuery竖排选项卡示例代码_jquery特效

JQuery竖排选项卡示例代码: 发布时间：2019-11-16编辑：脚本学堂

分享一个jquery实现的竖排页签代码，即jquery tab选项卡的代码，有需要的朋友参考下。

使用jquery1.4.4开发的竖排页签选项卡(Tab)的代码示例，代码完整包在附件中。

1，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竖排页签-www.jb200.com</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>

2，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;

}

3，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竖排选项卡的完整包。

上一篇：jquery show、hide、fadeIn、fadeOut、slideUp等的用法
下一篇：jquery限制只能输入数字禁止复制粘贴与输入法切换

与 JQuery竖排选项卡示例代码有关的文章

本文标题：JQuery竖排选项卡示例代码
本页链接：http://www.jb200.com/article/15437.html

浏览排行

栏目分类

热点文章

JQuery竖排选项卡示例代码