可以在线做动图的网站,安徽seo网络推广,做网站开发需要学什么软件,网站 pr说到选项卡。一開始我还真有点搞不懂怎么弄出来的#xff0c;但一想事实上也比复杂啊。无非就是把事件和事件的范围给控制好即可了。第一事件#xff1a;事件就两个#xff0c;鼠标放上去还有鼠标离开#xff0c;即放上显示。离开隐藏。 第二事件的范围#xff1a; 这是关… 说到选项卡。一開始我还真有点搞不懂怎么弄出来的但一想事实上也比复杂啊。无非就是把事件和事件的范围给控制好即可了。 第一事件事件就两个鼠标放上去还有鼠标离开即放上显示。离开隐藏。 第二事件的范围 这是关键的所在吧由于当你发现吧 控制好了以后有一个大的问题就是当鼠标离开选项卡选项的时候往下移动则会出现选项卡消失。 所以。应该把事件的范围控制的大一些即把整个选项卡还有内容包含起来。 以下是详细的操作代码。 01.html !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml xml:langen
headmeta http-equivContent-Type contenttext/html;charsetUTF-8title选项卡/titlelink relstylesheet typetext/css href./file/01.cssscript typetext/javascript src./file/jquery.js/scriptscript typetext/javascript src./file/01.js/script
/head
bodydiv classdiv_1 iddiv_1div classdiv_1_1选项卡1/divdiv classdiv_1_1_1 iddiv_1_1_1a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr//div/divdiv classdiv_2 iddiv_2div classdiv_2_1选项卡2/divdiv classdiv_2_1_1 iddiv_2_1_1a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr//div/divdiv classdiv_3 iddiv_3div classdiv_3_1选项卡3/divdiv classdiv_3_1_1 iddiv_3_1_1a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr//div/divdiv classdiv_4 iddiv_4div classdiv_4_1选项卡3/divdiv classdiv_4_1_1 iddiv_4_1_1a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr//div/divdiv classdiv_5 iddiv_5div classdiv_5_1选项卡3/divdiv classdiv_5_1_1 iddiv_5_1_1a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr//div/divdiv classdiv_6 iddiv_6div classdiv_6_1选项卡3/divdiv classdiv_6_1_1 iddiv_6_1_1a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr//div/divdiv classdiv_7 iddiv_7div classdiv_7_1选项卡3/divdiv classdiv_7_1_1 iddiv_7_1_1a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr//div/divdiv classdiv_8 iddiv_8div classdiv_8_1选项卡3/divdiv classdiv_8_1_1 iddiv_8_1_1a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr/a href#111111111/abr//div/div
/body
/html01.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
