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 相关文章推荐
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
JS遍历树层级关系实现原理解析
Aug 31 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 静态化实现代码
2009/03/20 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
js实现日历的简单算法
2017/01/24 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
python编写的最短路径算法
2015/03/25 Python
python爬取m3u8连接的视频
2018/02/28 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
pandas分区间,算频率的实例
2019/07/04 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
如何使用python切换hosts文件
2020/04/29 Python
Python基于locals返回作用域字典
2020/10/17 Python
selenium自动化测试入门实战
2020/12/21 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
如何写出好的Java代码
2014/04/25 面试题
优秀毕业生就业推荐信
2014/05/22 职场文书
交通事故协议书范文
2014/10/23 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电