使用的时候要引入jquery.js库
效果图：
?
?
<scirpt type="text/javascript" href="/js/jquery.js"></scirpt>
<style type="text/css">
ul{color:#fff5f5;display:block;margin:0;padding:0}
?
.main{list-style-type:none;display:block}
.main li{float:left;border:1px solid #858585;width:150px;height:24px;font-size:24px;margin:0 2px;text-align:center;padding:10px 0;display:block;background-color:#F0E5DA;vertical-align:middle;position:relative}
.main li a{text-decoration:none;color:#000}
.main li:hover {background-color:#CD0000;color:#FFF5F5}
.main li .innerdiv{position:relative;paddint-top:10px;border:1px solid #858585;width:461px;height:300px;display:none;top:12px;}
.main li .innerdiv .innerspan {color:#000;padding:2px;cursor:pointer;width:150px;margin:0px 5px;border:1px solid #858585;border-top:0;display:block;background-color:#FFF6CC;}
.main li .innerdiv .borderline{width:155px;height:192px;border-right:1px solid #858585;margin:0 5px;}
.main li .innerdiv .left{float:left;width:155px;height:300px;}
.main li .innerdiv .right{width:298px;height:296px;float:right;}
.main li .innerdiv .now {background-color:#fff;}
.main li .innerdiv span:hover{background-color:#fff;border-right:0;}
.main li:hover .innerdiv{display:block;}
.main li .innerdiv .right div{display:none;width:298px;height:300px;color:#000;}
?
/*显示内容*/
.main .innerdiv .right #player_block_1 .xiaoxue_right_top{width:292px;height:150px;color:#000;display:block;margin-top:5px;margin-left:4px;}
.main .innerdiv .right #player_block_1 .xiaoxue_right_top .xrt_left{width:180px;height:145px;border:1px solid #858585;float:left;display:block;}
.main .innerdiv .right #player_block_1 .xiaoxue_right_top .xrt_right{width:96px;float:right;height:145px;border:1px solid #858585;display:block;}
.main .innerdiv .right #player_block_1 .xiaoxue_right_middle{width:292px;height:90px;color:#000;display:block;margin:5px 0;margin-left:4px;}
.main .innerdiv .right #player_block_1 .xiaoxue_right_middle .xrm_left{width:180px;height:90px;border:1px solid #858585;float:left;display:block;}
.main .innerdiv .right #player_block_1 .xiaoxue_right_middle .xrm_right{width:96px;height:90px;border:1px solid #858585;float:right;display:block;}
.main .innerdiv .right #player_block_1 .xiaoxue_right_bottom{width:292px;height:30px;color:#000;display:block;margin-left:4px;}
.main .innerdiv .right #player_block_1 .xiaoxue_right_bottom a{display:block;float:left;margin:0 10px;font-size:12px;}
?
.main .innerdiv .right .bred{color:red;font-weight:boder;font-size:14px;}
.current{color:#000;padding:2px;cursor:pointer;width:150px;margin:0px 5px;border:1px solid #858585;border-top:0;border-right:0;display:block;background-color:#fff;}
</style>
<script type="text/javascript">
/**
?* 标签切换
?*id="player_nav_1" 鼠标点击的标签 _nav_是确定的 前面的可以更改?
?*id="player_block_1 要切换的内容 _block_是确定的前面的可以更改以用于不同的地方?
?*$(".awards_nav a").click(function(){switchBlock(this,4);}); 绑定事件?
?*/
function switchBlock(_this,count) ?
{ ?
?? ?var id=_this.id.replace(/^.+_/,""); ?
?? ?var name_space=_this.id.replace(/_.+/,""); ?
?? ?for(var i=1;i<=count;i++) ?
?? ?{ ?
?? ? ? ?jQuery("#"+name_space+"_nav_"+i).addClass("innerspan"); ?
?? ? ? ?document.getElementById(name_space+"_block_"+i).style.display="none"; ?
?? ?} ?
?? ?document.getElementById(_this.id).className="current"; ?
?? ?document.getElementById(name_space+"_block_"+id).style.display="block"; ?
}?
?
function switchSpan(_this,count)
{
?? ?var id=_this.id.replace(/^.+_/,""); ?
?? ?var name_space=_this.id.replace(/_.+/,"");?
?? ?for(var i=1;i<=count;i++) ?
?? ?{ ?
?? ? ? ?jQuery("#"+name_space+"_nav_"+i).removeClass("current"); ?
?? ?}?
?? ? document.getElementById(name_space+"_nav_"+id).className="current"; ?
}
</script>
<ul class="main">
<li>
<a href="javascript:void(0)">小学</a>
<div class="innerdiv">
<div class='left'>
<span id="player_nav_1" onmouseover="switchBlock(this,4)" ?class="current">小学一年级</span>
<span class="innerspan" id="player_nav_2" onmouseover="switchBlock(this,4)">小学二年级</span>
<span class="innerspan" id="player_nav_3" onmouseover="switchBlock(this,4)">小学三年级</span> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
<span class="innerspan" id="player_nav_4" onmouseover="switchBlock(this,4)">小学四年级</span>
<div class='borderline'>
</div>
</div>
<div class="right">
<div id="player_block_1" onmouseover="switchSpan(this,4)" ?style="display:block">
<div class='xiaoxue_right_top'>
<div class="xrt_left"><span class='bred'>春季班</span><br/><span class="bred">秋季班</span></div>
<div class="xrt_right"><span class="bred">相关品牌</span></div>
</div>
<div class="xiaoxue_right_middle">
<div class="xrm_left"><span class="bred">短期精品班次</span></div>
<div class="xrm_right"><span class="bred">招生简章</span></div>
</div>
<div class="xiaoxue_right_bottom">
<a href="#">小学一年级课程规划</a>
<a href="#">入学测试提</a>
<a href="#">课程体系</a>
</div>
</div>
<div id="player_block_2">
欢迎你走入小学
</div>
<div id="player_block_3">
在这里很奇妙
</div>
<div id="player_block_4">
快点下课吧
</div>
</div>
</div>
</li>
<li>
<a href="javascript:void(0)">初中</a>
<div class="innerdiv" style="left:-156px">
<div class="left">
<span id="zhuzhong_nav_1" onmouseover="switchBlock(this,3)" ?class="current">初中一年级</span>
<span class="innerspan" id="zhuzhong_nav_2" onmouseover="switchBlock(this,3)">初中二年级</span>
<span class="innerspan" id="zhuzhong_nav_3" onmouseover="switchBlock(this,3)">初中三年级</span>
<div class='borderline' style="height:220px"></div>
</div>
<div class="right">
<div id="zhuzhong_block_1" ?style="display:block">
初中无敌
</div>
<div id="zhuzhong_block_2">
我们一起跳舞吧
</div>
<div id="zhuzhong_block_3">
就这样的来吧
</div>
</div>
</div>
</li>
<li>
<a href="javascript:void(0)">高中</a>
<div class="innerdiv" ?style="left:-312px">
<div class="left">
<span id="gaozhong_nav_1" onmouseover="switchBlock(this,3)" ? ?class="current">高中一年级</span>
<span class="innerspan" id="gaozhong_nav_2" onmouseover="switchBlock(this,3)">高中二年级</span>
<span class="innerspan" id="gaozhong_nav_3" onmouseover="switchBlock(this,3)">高中三年级</span>
<div class='borderline' ?style="height:220px"></div>
</div>
<div class="right">
<div id="gaozhong_block_1" ?style="display:block">
高中生活真美好啊
</div>
<div id="gaozhong_block_2">
有点压力了哦
</div>
<div id="gaozhong_block_3">
为理想的大学努力吧
</div>
</div>
</div>
</li>
</ul>
?
?