使用的时候要引入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>
分享到:
相关推荐
常用js javascript 导航菜单 图片切换 手风琴 弹出框 切换标签
由小码农提供 http://www.xmn-xdm.com 为了方便开发,本案例包含jQuery页签切换Tab标签切换+导航栏+手风琴
实用的标签切换菜单效果
tab菜单单击时切换标签的例子,通用轻量级tab导航菜单
1.这是我参考网上例子,自己写的。...2.导航栏有四个标签,切换到不同的标签,viewpage页会切换相对应的fragment。 3.标签切换时,聚焦光标会有移动效果,稍加改进就可以有更酷炫的效果。 希望能帮助到有需要的人!
CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
CSS3实现的标签导航菜单,无需任何js代码,菜单采用tab分栏切换的风格,简单实用。
最近开始了一个新的手机App项目,需要用到底部切换标签和左右滑动切换页面功能,做了个DEMO分享给大家,如果有什么错误希望大家指出,谢谢!
绝对经典的标签切换栏目显示
jquery纯文字 tab切换 jqury导航栏 jqury特效
jqury导航栏 jqury特效 360度旋转 tab标签 切换内容
JS用户中心tab标签切换菜单是一款用户管理系统菜单切换代码。
这是一个只含有导航树和点击导航树出现tab选项卡的简单案例!
实用的标签切换菜单
又一款漂亮精致的标签切换菜单
Mui、H5+开发APP小技巧,点击底部导航切换界面源码文件,欢迎相互学习
美观实用的标签切换菜单
用js实现的多页面切换功能,应用到ajax,动态加载所需要的页面及所传递参数,有滚动条,很好的东西哦 因为用到ajax,需要在server下才能看到正常加载状态
vue+element导航+标签导航+路由跳转+路由转换,有需要可以取,博客有详尽说明,https://blog.csdn.net/Hei_lovely_cat/article/details/104692047
本文实例为大家分享了Vue实现点击导航栏当前标签后变色的具体代码,供大家参考,具体内容如下 效果图 实现 这个功能,借助一个切换标识,当与各标签项 index 对应时切换 css。 HTML: <!-- 点击切换变色...