选项卡的制作和注意要点

首页 > 代码库 > 选项卡的制作和注意要点

选项卡的制作和注意要点

2024-09-21 17:07:03 217人阅读

说到选项卡。一開始我还真有点搞不懂怎么弄出来的，但一想事实上也比复杂啊。无非就是把事件和事件的范围给控制好即可了。

第一事件：事件就两个，鼠标放上去还有鼠标离开，即放上显示。离开隐藏。

第二事件的范围：这是关键的所在吧，由于当你发现吧控制好了以后有一个大的问题就是当鼠标离开选项卡选项的时候往下移动，则会出现选项卡消失。

所以。应该把事件的范围控制的大一些，即把整个选项卡还有内容包含起来。

以下是详细的操作代码。

01.html

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>选项卡</title>
	<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/file/01.css">
	<script type="text/javascript" src="http://www.mamicode.com/file/jquery.js"></script>
	<script type="text/javascript" src="http://www.mamicode.com/file/01.js"></script>
</head>
<body>
	<div class="div_1" id="div_1">
		<div class="div_1_1">选项卡1</div>
		<div class="div_1_1_1" id="div_1_1_1">
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
		</div>
	</div>
	<div class="div_2" id="div_2">
		<div class="div_2_1">选项卡2</div>
		<div class="div_2_1_1" id="div_2_1_1">
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
		</div>
	</div>
	<div class="div_3" id="div_3">
		<div class="div_3_1">选项卡3</div>
		<div class="div_3_1_1" id="div_3_1_1">
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
		</div>
	</div>
	<div class="div_4" id="div_4">
		<div class="div_4_1">选项卡3</div>
		<div class="div_4_1_1" id="div_4_1_1">
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
		</div>
	</div>
	<div class="div_5" id="div_5">
		<div class="div_5_1">选项卡3</div>
		<div class="div_5_1_1" id="div_5_1_1">
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
		</div>
	</div>
	<div class="div_6" id="div_6">
		<div class="div_6_1">选项卡3</div>
		<div class="div_6_1_1" id="div_6_1_1">
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
		</div>
	</div>
	<div class="div_7" id="div_7">
		<div class="div_7_1">选项卡3</div>
		<div class="div_7_1_1" id="div_7_1_1">
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
		</div>
	</div>
	<div class="div_8" id="div_8">
		<div class="div_8_1">选项卡3</div>
		<div class="div_8_1_1" id="div_8_1_1">
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
			<a href="http://www.mamicode.com/#">111111111</a><br/>
		</div>
	</div>
</body>
</html>

01.css

body{
	background-color: #646464;
}
*{
	margin: 0px;
	padding: 0px;
}
.div_1{
	margin-left: 200px;
	width: 100px;
	height: 300px;
	float: left;
}
.div_2,.div_3,.div_4,.div_5,.div_6,.div_7,.div_8{
	margin-left: 20px;
	width: 100px;
	height: 300px;
	float: left;
}
.div_1_1,.div_2_1,.div_3_1,.div_4_1,.div_5_1,.div_6_1,.div_7_1,.div_8_1{
	background-color: black;
	width: 100px;
	height: 40px;
	color: white;
}
.div_1_1_1,.div_2_1_1,.div_3_1_1,.div_4_1_1,.div_5_1_1,.div_6_1_1,.div_7_1_1,.div_8_1_1{
	background-color: orange;
	width: 100px;
	height: 260px;
	display: none;
}

01.js：

$(document).ready(function(){
	$("#div_1").mouseover(function(){
		$("#div_1_1_1").css("display","block");
	});
	$("#div_1").mouseout(function(){
		$("#div_1_1_1").css("display","none");
	});
	$("#div_2").mouseover(function(){
		$("#div_2_1_1").css("display","block");
	});
	$("#div_2").mouseout(function(){
		$("#div_2_1_1").css("display","none");
	});
	$("#div_3").mouseover(function(){
		$("#div_3_1_1").css("display","block");
	});
	$("#div_3").mouseout(function(){
		$("#div_3_1_1").css("display","none");
	});
	$("#div_4").mouseover(function(){
		$("#div_4_1_1").css("display","block");
	});
	$("#div_4").mouseout(function(){
		$("#div_4_1_1").css("display","none");
	});
	$("#div_5").mouseover(function(){
		$("#div_5_1_1").css("display","block");
	});
	$("#div_5").mouseout(function(){
		$("#div_5_1_1").css("display","none");
	});
	$("#div_6").mouseover(function(){
		$("#div_6_1_1").css("display","block");
	});
	$("#div_6").mouseout(function(){
		$("#div_6_1_1").css("display","none");
	});
	$("#div_7").mouseover(function(){
		$("#div_7_1_1").css("display","block");
	});
	$("#div_7").mouseout(function(){
		$("#div_7_1_1").css("display","none");
	});
	$("#div_8").mouseover(function(){
		$("#div_8_1_1").css("display","block");
	});
	$("#div_8").mouseout(function(){
		$("#div_8_1_1").css("display","none");
	});
});

选项卡的制作和注意要点

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 选项卡的制作和注意要点

选项卡的制作和注意要点

看完仍有疑问？有类似问题直接问程序猿