选项卡的制作和注意要点
Posted jzdwajue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选项卡的制作和注意要点相关的知识，希望对你有一定的参考价值。
说到选项卡。一開始我还真有点搞不懂怎么弄出来的，但一想事实上也比复杂啊。无非就是把事件和事件的范围给控制好即可了。
第一事件：事件就两个，鼠标放上去还有鼠标离开，即放上显示。离开隐藏。
第二事件的范围： 这是关键的所在吧，由于当你发现吧 控制好了以后有一个大的问题就是当鼠标离开选项卡选项的时候往下移动，则会出现选项卡消失。
所以。应该把事件的范围控制的大一些，即把整个选项卡还有内容包含起来。
以下是详细的操作代码。
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="./file/01.css"> <script type="text/javascript" src="./file/jquery.js"></script> <script type="text/javascript" src="./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="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">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="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">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="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">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="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">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="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">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="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">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="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">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="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">111111111</a><br/> <a href="#">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");
});
});以上是关于选项卡的制作和注意要点的主要内容，如果未能解决你的问题，请参考以下文章