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 相关文章推荐
js 立即调用的函数表达式如何写
Jan 12 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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中的魔术方法总结和使用实例
2015/05/11 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
javascript实现数独解法
2015/03/14 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
基于js中this和event 的区别(详解)
2017/10/24 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
毕业生教师求职信
2013/10/20 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
老师给学生的表扬信
2014/01/17 职场文书
高考标语大全
2014/06/05 职场文书
解除同居协议书
2015/01/29 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis