利用js定义一个导航条菜单


Posted in Javascript onMarch 14, 2017

效果:

利用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 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 #Javascript
使用BootStrap实现标签切换原理解析
Mar 14 #Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 #Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 #Javascript
AngularJS实现页面定时刷新
Mar 14 #Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 #Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 #Javascript
You might like
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
Python 异常处理实例详解
2014/03/12 Python
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python requests.get带header
2020/05/05 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
办公室主任岗位职责
2013/11/08 职场文书
党员思想汇报范文
2013/12/30 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
2014年质检员工作总结
2014/11/18 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
python如何进行基准测试
2021/04/26 Python
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis