js实现菜单跳转效果


Posted in Javascript onDecember 11, 2020

本文实例为大家分享了js实现菜单跳转效果的具体代码,供大家参考,具体内容如下

想要的效果图:

js实现菜单跳转效果

直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .box {
   width: 500px;
   height: 300px;
   /* border: 1px solid #ccc; */
   margin: 50px auto;
  }

  span {
   width: 80px;
   height: 30px;
   border: 1px solid #ccc;
   display: inline-block;
   text-align: center;
   line-height: 30px;
  }

  .body {
   margin-top: 5px;
   width: 450px;
   border: 1px solid #ccc;
   height: 250px;
   background: #eee;
  }

  .current {
   color: red;
   background: #555;
  }

  .body div {
   display: none;
   text-align: center;
   line-height: 250px;
  }

  .body .active {
   display: block
  }
 </style>
</head>

<body>
 <div class="box">
  <div class="header">
   <span class="current">关注</span>
   <span>推荐</span>
   <span>热点</span>
   <span>本地</span>
   <span>段子</span>
  </div>
  <div class="body">
   <div class="active">关注:早上吃什么?</div>
   <div>推荐:中午吃什么?</div>
   <div>热点:晚饭吃什么?</div>
   <div>本地:宵夜吃什么?</div>
   <div>段子:半夜吃什么?</div>
  </div>
 </div>
 <script>
  var oSpan = document.querySelectorAll('span')
  var oDiv = document.querySelector('.body').children
  for (let i = 0; i < oSpan.length; i++) {
   oSpan[i].index = i
   console.log(oSpan[i].index);
   oSpan[i].onclick = function () {
    for (let k = 0; k < oSpan.length; k++) {
     oSpan[k].classList.remove('current')
    }
    this.classList.add('current')
    console.log(oSpan[i].index);

    for (let k = 0; k < oSpan.length; k++) {
     oDiv[k].classList.remove('active')
    }
    oDiv[this.index].classList.add('active')
   }

  }
 </script>
</body>

</html>

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

Javascript 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
jquery实现拖拽小方块效果
Dec 10 #jQuery
js实现弹幕墙效果
Dec 10 #Javascript
jQuery实现简单弹幕制作
Dec 10 #jQuery
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 #Vue.js
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 #Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 #Vue.js
微信小程序实现天气预报功能(附源码)
Dec 10 #Javascript
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python selenium xpath定位操作
2020/09/01 Python
详解Python中import机制
2020/09/11 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
单位办理社保介绍信
2014/01/10 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
干部对照检查材料范文
2014/08/26 职场文书
小马王观后感
2015/06/11 职场文书
素质教育培训心得体会
2016/01/19 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript