导航菜单 标签切换

使用的时候要引入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>