【JQuery】标签页效果

实践是检验真理的唯一标准，不动手做，你永远不知道你和目标的距离有多远！

HTML：

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
    <meta http-equiv="Contect-Type" content="text/html;charset=UTF-8">
    <link type="text/css" rel = "stylesheet" href="user.css" />
	<script type = "text/javascript" src="jquery-3.3.1.min.js"> </script>
	<script type ="text/javascript" src="tab.js"> </script>
</head>
<body>
    <ul id="tabfirst">
			<li class="tabin">1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<div class="contentin contentfirst">content1</div>
		<div class="contentfirst">content2</div>
		<div class="contentfirst">content3</div>
		<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>

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;
    //控制元素上鼠标的样式（pointer为手型样式）
	cursor: pointer;
}
#tabsecond li.tabin {
	background-color: #F2F6FB;
	border: 1px solid black;
	border-bottom: 0;
    //首先设置相对定位
	position: relative;
    //设置控制元素在界面的层高
	z-index: 100;

}
#contentsecond {
	width: 500px;
	height: 200px;
	padding: 10px;
	background-color: #F2F6FB;
	clear: left;
	border: 1px solid black;
    //控制元素的定位方式（relative：为相对定位）
	position: relative;
    //向上移动一个像素
	top: -1px;
}
img {
	display: none;
}

JS：

var timoutid;
$(document).ready(function(){

    //此处的each方法会遍历li中的每一个对象执行function中的方法
    //而index是li这个对象组对应对象的索引值，我们可以通过index找到li中的具体的某个对象
    $("tabfirst li").each(function(index){

        //鼠标移除标签触犯的事件
        $(this).mouseover(function(){
            //获取移除的标签对象
            var liNode=$(this);
            //事件触发的延迟方法
            timoutid=setTimeout(function(){
                //去除样式
                $("div.contentin").removeClass("contentin");
                $("#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("TabLoad.html");
    $("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("");
        //显示想要展示的内容
        $(this).show();
        
    }).bind("ajaxStop",function(){
        //slideUp方法可定义内容的显示速度（参数可以是时间也可以是slow，normal，fast）
        $(this).slideUp("1000");
    });
});

效果：

学习之后总结与思考，有何不足还请指出，最后感谢大家的阅读和点赞！

【JQuery】标签页效果

猜你喜欢