利用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 相关文章推荐
判断滚动条到底部的JS代码
Nov 04 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
详解实现vue的数据响应式原理
Jan 20 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 进程锁定问题分析研究
2009/11/24 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
smarty表格换行实例
2014/12/15 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
网页javascript精华代码集
2007/01/24 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
python创建和使用字典实例详解
2013/11/01 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python docx库用法示例分析
2019/02/16 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
教师应聘自荐信范文
2014/03/14 职场文书
法学院毕业生求职信
2014/06/25 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
地心历险记观后感
2015/06/15 职场文书