當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

选项卡的制作和注意要点

發布時間：2023/11/29 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了选项卡的制作和注意要点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

說到選項卡。一開始我還真有點搞不懂怎么弄出來的，但一想事實上也比復雜啊。無非就是把事件和事件的范圍給控制好即可了。

第一事件：事件就兩個，鼠標放上去還有鼠標離開，即放上顯示。離開隱藏。

第二事件的范圍：這是關鍵的所在吧，由于當你發現吧控制好了以后有一個大的問題就是當鼠標離開選項卡選項的時候往下移動，則會出現選項卡消失。

所以。應該把事件的范圍控制的大一些，即把整個選項卡還有內容包含起來。

以下是詳細的操作代碼。

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

轉載于:https://www.cnblogs.com/jzdwajue/p/6848136.html

總結

以上是生活随笔為你收集整理的选项卡的制作和注意要点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。