jq实现标签页效果

于 2009-09-14 15:47:37 发布 · 134 阅读

文章标签：

#Ajax #jQuery #JSP #CSS #HTML #ViewUI

jquery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的标签页效果插件，通过简单的HTML结构和jQuery事件绑定，实现了平滑切换不同内容面板的功能。该插件还支持加载外部页面内容，展示了基本的AJAX交互方式。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery5-标签页效果</title>
    <link type="text/css" rel="stylesheet" href="css/tab.css">
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/tab.js"></script>
</head>
<body>
<ul id="tabfirst">
    <li class="tabin">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
</ul>
<div class="contentin contentfirst">我是内容1</div>
<div class="contentfirst">我是内容2</div>
<div class="contentfirst">我是内容3</div>
<br/>
<br/>
<br/>
<ul id="tabsecond">
    <li class="tabin">装入完整页面</li>
    <li>装入部分页面</li>
    <li>从远程获取页面</li>
</ul>
<div id="contentsecond">
    <img src="image/loading.gif" alt="装载中"/>

    <div id="realcontent"></div>
</div>
</body>
</html>


ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#tabfirst li {
    float: left;
    background-color: #868686;
    color: white;
    padding: 5px;
    margin-right: 2px;
    border: 1px solid white;
}

#tabfirst li.tabin {
    background-color: #6e6e6e;
    border: 1px solid #6e6e6e;
}

div.contentfirst {
    clear: left;
    background-color: #6e6e6e;
    color: white;
    width: 500px;
    height: 100px;
    padding: 10px;
    display: none;
}

div.contentin {
    display: block;
}

#tabsecond li {
    float: left;
    background-color: white;
    color: blue;
    padding: 5px;
    margin-right: 2px;
    cursor: pointer;
}

#tabsecond li.tabin {
    background-color: #F2F6FB;
    border: 1px solid black;
    border-bottom: 0;
    z-index: 100;
    position: relative;
}

#contentsecond {
    width: 500px;
    height: 200px;
    padding: 10px;
    background-color: #F2F6FB;
    clear: left;
    border: 1px solid black;
    position: relative;
    top: -1px;
}
img{
    display:none;
}


var timeoutid;
$(function() {
    //先找到所有的标签
    /* $("#li").mouseover(function(){
     //将原来显示的内容区进行隐藏
     //当前标签所对应的内容区域显示出来
     });*/
    $("#tabfirst li").each(function(index) {
        //每一个包装了li的jquery的对象，都会执行function中的代码
        //index是当前执行这个function代码的li对应在所有li组成的数组
        //中的索引值
        //有了Index的值之后，就可以找到当前标签对应的内容区域
        $(this).mouseover(function() {
            var liNode = $(this);
            timeoutid = setTimeout(function() {
                //将原来显示的内容区进行隐藏
                $("div.contentin").removeClass("contentin");
                //清除tabin的class定义
                $("#tabfirst li.tabin").removeClass("tabin");
                //当前标签所对应的内容区域显示出来
                $("div.contentfirst").eq(index).addClass("contentin");
                liNode.addClass("tabin");
            }, 300);
        }).mouseout(function() {
            clearTimeout(timeoutid);
        });
    });
    //在整个页面装入完成之后，标签效果2的内容区域需要装入静态html页面内容
    $("#realcontent").load("TabLoad.html");
    //找到标签2效果对应的三个标签，注册鼠标点击时间
    $("#tabsecond li").each(function(index) {

        $(this).click(function() {
            $("#tabsecond li.tabin").removeClass("tabin");
            $(this).addClass("tabin");
            if (index == 0) {
                $("#realcontent").load("TabLoad.html");
            } else if (index == 1) {
                $("#realcontent").load("TabLoad.jsp h2");
            } else if (index == 2) {
                //装入远程数据（这里也是一个动态页面输出的数据）
                $("#realcontent").load("TabData.jsp");
            }
        });

    });
    //对于loading图片的绑定ajax请求开始和交互结束的事件
    $("#contentsecond img").bind("ajaxStart", function() {
        //把div里面的内容清空
        $("#realcontent").html("");
        //整个页面中任意ajax交互开始前，function中的内容会被执行
        $(this).show();
    }).bind("ajaxStop", function() {
        //整个页面中任意ajax交互结束后，function中的内容会被执行
        $(this).slideUp("1000");
    });

});