Tab creation and note points, Tab creation points

Tab creation and note points, Tab creation points

Speaking of tabs, I was a little confused at first, but I thought it was actually more complicated. I just wanted to control the scope of events and events.

Event 1: There are two events. Move the mouse up and move the mouse away, that is, put the display on and hide.

Scope of the second event: This is the key, because when you find that it is well controlled, a major problem is that when you move the mouse away from the tab option, the tab disappears.

Therefore, the scope of the event should be larger, that is, the entire tab and content should be included.

The following is the specific operation code.

01. html

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 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");});});