<!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;}
浏览器效果：
时间： 2024-07-31 14:29:54