利用js定义一个导航条菜单
更新时间:2017年03月14日 09:24:08 作者:东腾
本文主要介绍了利用js定义一个导航条菜单的方法。具有很好的参考价值。下面跟着小编一起来看下吧
效果:
一、html代码:
<div class="Maintenance"> <div class="Title"> <div class="M_Button" id="Plan">menu1</div> <div class="M_Button" id="Expert">menu2</div> <div class="M_Button" id="Team">menu3</div> <div class="M_Button" id="Medic">menu4</div> <div class="M_Button" id="Shelter">menu5</div> <div class="M_Button" id="Warehouse">menu6</div> </div> </div> <!-- menu1 --> <div class="Content" id="coPlan">111 </div> <!-- menu2 --> <div class="Content" id="coExpert" style="display: none">222 </div> <!-- menu3 --> <div class="Content" id="coTeam" style="display: none">333 </div> <!-- menu4--> <div class="Content" id="coMedic" style="display: none">444 </div> <!--menu5--> <div class="Content" id="coShelter" style="display: none"> </div> </div> <!-- menu6 --> <div class="Content" id="coWarehouse" style="display: none">666 </div>
二、js代码
$(".M_Button").click(function () { $(".M_Button").removeClass("M_Button_inner"); $(this).addClass("M_Button_inner"); $(".Content").hide(); TabButton = $(this).attr('id'); $('#co' + TabButton).css('display', 'block'); });
三、css代码
.M_Button { float: left; height: 42px; width: 98px; cursor: pointer; line-height: 42px; color: #FFFFFF; text-align: center; font-size: 14px; background-image: url(../../images/emergency/ReffectRadius/The_pop-up_1.png); background-repeat: no-repeat; background-position: right; } .M_Button:hover { color: #000; background-image: url(../../images/emergency/ReffectRadius/The_pop-up_2.png); background-repeat: repeat-x; } .M_Button_inner { color: #000; background-image: url(../../images/emergency/ReffectRadius/The_pop-up_2.png); background-repeat: repeat-x; } .Content { float: left; height: 438px; width: 100%; /*background-image: url(../../../../images/Inspection/Hidden_danger/background.png);*/ } .M_Content { height: 434px; width: 100%; z-index: 5; position: absolute; /*background-color: #666;*/ right: 2px; top: 0px; }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
这篇文章主要给大家介绍了关于JavaScript中常用的3种弹出提示框(alert、confirm、prompt)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-11-11Javascript前端UI框架Kit使用指南之Kitjs简介
本文给大家简单介绍了一款优秀的Javascript前端UI框架--Kitjs,支持PC端以及手机开发领域,非常的全面,这里推荐给有需要的小伙伴。2014-11-11利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
“工欲善其事,必先利其器” 恩,这句话我觉得说的特别有道理,下面这篇文章主要给大家介绍了关于利用chrome浏览器进行js调试并找出元素绑定的点击事件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2018-09-09JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
这篇文章主要介绍了JavaScript浏览器对象模型BOM(BrowserObjectModel),结合实例形式较为详细的分析了BOM模型的常用对象与相关使用技巧,需要的朋友可以参考下2016-11-11在webstorm开发微信小程序之使用阿里自定义字体图标的方法
这篇文章主要介绍了在webstorm开发微信小程序之使用阿里自定义字体图标 的相关资料,需要的朋友可以参考下2018-11-11javascript获取鼠标位置部分的实例代码(兼容IE,FF)
这篇文章介绍了javascript获取鼠标位置部分的实例代码,有需要的朋友可以参考一下2013-08-08解决layui前端框架 form表单,table表等内置控件不显示的问题
今天小编就为大家分享一篇解决layui前端框架 form表单,table表等内置控件不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论