利用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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
奇怪的PHP引用效率问题分析
2012/03/23 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
详解在vue-cli中使用路由
2017/09/25 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
Python开发编码规范
2006/09/08 Python
Python异常学习笔记
2015/02/03 Python
python版大富翁源代码分享
2018/11/19 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
银行自荐信范文
2013/10/07 职场文书
单位创先争优活动方案
2014/01/26 职场文书
给校长的一封建议书
2014/03/12 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
员工手册董事长致辞
2015/07/29 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
Python实现的扫码工具居然这么好用!
2021/06/07 Python
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技