利用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 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
微信小程序 跳转传参数与传对象详解及实例代码
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代码
2008/09/10 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
php基本函数汇总
2015/07/09 PHP
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
JS实现简单日历特效
2020/01/03 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
使用python模拟命令行终端的示例
2019/08/13 Python
详解Python3 pandas.merge用法
2019/09/05 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
师范毕业生自荐信
2013/10/17 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
回门宴父母答谢词
2014/01/26 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
工商管理自荐书
2014/07/06 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
地理科学专业自荐信
2014/09/01 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android