jQuery小试之标签页

最新推荐文章于 2021-08-06 14:01:58 发布

「已注销」

最新推荐文章于 2021-08-06 14:01:58 发布

阅读量2.2k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lidatgb/article/details/7753073

这次我们要做的是两个标签页。第一个标签页模拟的是当鼠标划过标签时，下面的标签页显示对应的新闻类型；第二个标签页是当鼠标单击某个标签时，产生加载动画效果，标签页重新加载对应内容，不刷新页面。

前台界面：

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <link href="css/tab.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/tab.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
<ul id="tabfirst">
			<li class="tabin">科技</li>
			<li>经济</li>
			<li>体育</li>
		</ul>
		<div class="contentin contentfirst">科技新闻</div>
		<div class="contentfirst">经济新闻</div>
		<div class="contentfirst">体育新闻</div>
		<br />
		<ul id="tabsecond">
			<li class="tabin">装入完整页面</li>
			<li>装入部分页面</li>
			<li>从远程获取数据</li>
		</ul>
		<div id="contentsecond" display="block">
			<img alt="装载中" src="images/img-loading.gif" />
			<div id="realcontent"></div>
		</div>
    </form>
</body>
</html>

CSS:

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: 300px;
	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;
	/*设置relative才能设置z-index*/
	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;
}

JavaScript：

var timoutid;
$(document).ready(function () {
    //dom准备完毕执行
    $("#tabfirst li").each(function (index) {
        $(this).mouseover(function () {
            var liNode = $(this);
            timoutid = setTimeout(function () {
                //将原来显示的内容区域进行隐藏
                $("div.contentin").removeClass("contentin");
                //对有tabin的class定义的li清除tabin的class
                $("#tabfirst li.tabin").removeClass("tabin");
                //当前标签所对应的内容区域显示出来
                //$("div").eq(index).addClass("contentin");
                $("div.contentfirst:eq(" + index + ")").addClass("contentin");
                liNode.addClass("tabin");
            }, 300);
        }).mouseout(function () {
        //鼠标移除清楚延迟
            clearTimeout(timoutid);
        });
    });
//加载全部内容
    $("#realcontent").load("allTab.html");
    //注册对应的标签点击事件
    $("#tabsecond li").each(function (index) {
        $(this).click(function () {
            $("#tabsecond li.tabin").removeClass("tabin");
            $(this).addClass("tabin");
            if (index == 0) {
                //装入全部内容
                $("#realcontent").load("allTab.html");
            } else if (index == 1) {
                //装入虚拟动态部分页面
                $("#realcontent").load("allTab.html h2");
            } else if (index == 2) {
                //注入部分内容
                $("#realcontent").load("allTab.html span")
            }
        });
    });
    //对于loading图片绑定ajax请求开始和交互结束的事件
    $("#contentsecond img").bind("ajaxStart", function () {
        //把div里面的内容清空
        $("#realcontent").html("");
        //整个页面中任意ajax交互开始前，function中的内容会被执行
        $(this).show();
    }).bind("ajaxStop", function () {
        //整个页面中任意ajax交互结束后，function中的内容会被执行	
        $(this).slideUp("1000");
    });
});

运行结果：