四、Jquery实例-标签页效果

最新推荐文章于 2023-04-11 08:46:50 发布

原创最新推荐文章于 2023-04-11 08:46:50 发布 · 967 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #stylesheet #border #div #class

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍使用JQuery实现标签页效果的方法，包括HTML结构设置、CSS样式定义及JavaScript交互逻辑。通过三个文件：tab.htm、tab.css和tab.js完成标签页的创建，支持鼠标悬停切换内容区和加载不同类型的页面数据。

一、tab.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery实例-标签页效果</title>
    <link type="text/css" rel="stylesheet" href="css/tab.css" />
    <script type="text/javascript" src="js/jquery-1.2.6.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 />
    <br />
    <ul id="tabsecond">
        <li class="tabin">装入完整页面</li>
        <li>装入动态部分页面</li>
        <li>从远程获取数据</li>
    </ul>
    <div id="contentsecond">
    <img alt="页面装载中" src="images/img-loading.gif" />
    <div id="realcontent"></div>
    </div>
</body>
</html>

二、tab.css

ul,li
{
margin:0px;
padding:0px;
list-style:none;
}
#tabfirst li
{
float:left;
background-color:#868686;
color:#ffffff;
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:#ffffff;
width:300px;
height:100px;
padding:2px;
display:none; /*首先全部内容区隐藏*/
}
div.contentin
{
display:block; /*显示*/
}

#tabsecond li
{
float:left;
background-color:White;
color:Blue;
padding:5px;
margin-right:2px;
cursor:pointer; /*手形*/
}
#tabsecond .tabin
{
background-color :#f2f6fb;
border:1px solid black;
border-bottom:0px; /*去掉下边框*/
z-index:100; /*值越大越在上面*/
position:relative; /*如果要使z-index起作用，必须要加position:relative;*/
}
#contentsecond
{
width:300px;
padding:10px;
background-color:#f2f6fb;
clear:left;
border:1px solid black;
position:relative; /*相对于原来的位置*/
top:-1px; /*向上移动1个像素*/
}
#contentsecond img
{
display:none;
}

三、tab.js

var timeoutid; //全局变量
$(document).ready(function(){
    $("#tabfirst li").each(function(index){
      //每个包装li的jquery对象都会执行function代码
      //index 是当前执行这个functon代码的li，对应在所有li组成的数组中的索引值
         $(this).mouseover(function(){
                var liNode=$(this);
                timeoutid=setTimeout(function(){
                    $("#tabfirst li.tabin").removeClass("tabin"); //清除上一次，鼠标移入的li的样式
                    $("div.contentin").removeClass("contentin");
                    $(liNode).addClass("tabin");
                    $("div.contentfirst").eq(index).addClass("contentin"); //当前标签所对应的内容区域
                    //$("div.contentfirst:eq("+index+")").addClass("contentin");
                },300); //内的代码延长300毫秒后运行
         }).mouseout(function(){
             clearTimeout(timeoutid); //清除延迟
            });
    });

    //在整个页面装入后，#contentsecond装入静态的html内容
    $("#realcontent").load("tabload.htm");

        $("#tabsecond li").each(function(index){
           $(this).click(function(){
               $("#tabsecond li.tabin").removeClass("tabin");
               $(this).addClass("tabin");
               if(index==0)
               {
                 //装入静态完整页面
                 $("#realcontent").load("tabload.htm");
               }else if(index==1){
                 //装入动态部分页面
                 $("#realcontent").load("tabload.aspx div"); //将tabload.aspx的div标签显示出来
               }else if(index==2)
               {
                 //装入远程数据（这里也是动态页面输出的数据）
                 $("#realcontent").load("tabdata.aspx");
               }
           });
        });

     //对load图片绑定 ajax请求开始和交互结束事件
     $("#contentsecond img").bind("ajaxStart",function(){
        $("#realcontent").html("");
        //整个页面任何ajax交互开始时，function中的内容会被执行
        $(this).show();
     }).bind("ajaxStop",function(){
        $(this).hide();
        });

});