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

选项卡的制作和注意要点

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

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

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

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

以下是详细的操作代码。

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");
	});
});




选项卡的制作和注意要点