JavaScript实现横版菜单栏


Posted in Javascript onMarch 17, 2020

本文实例为大家分享了JavaScript实现横版菜单栏的具体代码,供大家参考,具体内容如下

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>横版菜单栏</title>
 <style>
 .active{
  background-color: aqua;
 }
 .hide{
  display: none;
 }
 .menu{
  background-color: #667dbd;
  width: 300px;
  height: 30px;
 }
 .menu-item{
  border: #bd342d solid 2px;
  cursor: pointer;
  /*鼠标悬停在相应标签上时变成手指的样子*/
 }
 .con-item{
  min-height: 200px;
  border: solid 1px;
  width: 300px;
 }
 </style>
</head>
<body>
<!--什么时候用漂浮什么时候用内联标签呢?-->
 <div class="menu">
 <span class="menu-item active" m="1">菜单一</span>
 <span class="menu-item" m="2">菜单二</span>
 <span class="menu-item" m="3">菜单三</span>
 </div>
 <div class="content">
 <div class="con-item" c="1">内容一</div>
 <div class="con-item hide" c="2">内容二</div>
 <div class="con-item hide" c="3">内容三</div>
 </div>
 
 <script src="jquery-1.12.4.js"></script>
 <script>
 $('.menu-item').click(function () {
  $(this).addClass('active').siblings().removeClass('active');
  var match = $(this).attr('m');
  $('.content').children('[c='+match+']').removeClass('hide').siblings().addClass('hide');
//  children函数的参数要求是字符串!
//  $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
//  也可以用索引的方式(.eq($(this).index()))找到对应的标签,这种处理方式就不需要要用到自设属性m和c了
 });
 </script>
</body>
</html>

更多菜单效果点击《JavaScript菜单专题》学习,还有一些不错的专题分享给大家: Javascript级联菜单特效汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
JavaScript实现留言板案例
Mar 17 #Javascript
es6函数之严格模式用法实例分析
Mar 17 #Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 #Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 #Javascript
JS前端模块化原理与实现方法详解
Mar 17 #Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 #Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 #Javascript
You might like
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP 类与构造函数解析
2017/02/06 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python类属性与实例属性用法分析
2015/05/09 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Python如何读写CSV文件
2020/08/13 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
提高EJB性能都有哪些技巧
2012/03/25 面试题
自我鉴定三原则
2014/01/13 职场文书
护士节策划方案
2014/05/19 职场文书
法院信息化建设方案
2014/05/21 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014企业年终工作总结
2014/12/23 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书