鼠标悬浮onmouseover:Jquery兼容性很好的，竖向选项卡切换代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标悬浮onmouseover:Jquery兼容性很好的，竖向选项卡切换代码相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>TAB切换</title> <script type="text/javascript" src="jQuery1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $tab_li = $(‘#tab ul dl‘); $tab_li.hover(function(){ $(this).addClass(‘selected‘).siblings().removeClass(‘selected‘); var index = $tab_li.index(this); $(‘div.tab_box > div‘).eq(index).show().siblings().hide(); }); }); </script> </head> <body> <div id="tab"> <ul class="tab_menu"> <dl>所有课程</dl> <dl >11月份</dl> <dl>12月份</dl> <dl>1月份</dl> <dl>2月份</dl> <dl>3月份</dl> <dl >4月份</dl> <dl class="selected">5月份</dl> </ul> <div class="tab_box"> <div class="hide"> <!--近期所有课程开始--> 近期所有课程 <!--近期所有课程结束--> </div> <div class="hide"> <!--11月份课程开始--> 11月份课程 <!--11月份课程结束--> </div> <div class="hide" > <!--12月份课程开始--> 12月份课程 <!--12月份课程结束--> </div> <div class="hide" > <!--1月份课程开始--> 1月份课程 <!--1月份课程结束--> </div> <div class="hide"> <!--2月份课程开始--> 2月份课程 <!--2月份课程结束--> </div> <div class="hide"> <!--3月份课程开始--> 3月份课程 <!--3月份课程结束--> </div> <div class="hide"> <!--4月份课程开始--> 4月份课程 <!--4月份课程结束--> </div> <div class=""> <!--5月份课程开始--> 5月份课程 <!--5月份课程结束--> </div> </div> </div> <!-- 代码 结束 --> </body> </html>
*{margin:0px; padding:0px; list-style:none;}
/* 内容竖向菜单栏样式 */
#tab{width:800px; margin:auto;}
#tab .tab_menu{width:100%;position:absolute;z-index:1; width:80px;}
#tab .tab_menu dl{cursor:pointer; width:80px; height:46px; line-height:46px; background:#fff9e3;
border-left:solid 4px #fd4c46; margin-bottom:4px; font-weight:bold; font-size:18px; color:#c08a43; text-align:center}
/* 内容样式 */
#tab .tab_box{padding-left:90px;padding-top:10px;width:670px;min-height:690px;height:auto !important;font-size:12px;color: #333;}
.tab_box div{padding:10px; }
#tab .tab_menu .selected{background: grey; color:#fff;}
#con_one_2,#con_one_3,#con_one_4,#con_one_5,#con_one_6,#con_one_7,#con_one_8{ padding:10px; margin:auto}
.hide{display:none;}浏览器效果：
以上是关于鼠标悬浮onmouseover:Jquery兼容性很好的，竖向选项卡切换代码的主要内容，如果未能解决你的问题，请参考以下文章