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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
jquery中post方法用法实例
Oct 21 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
Vue实现购物车基本功能
Nov 08 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
php使用session二维数组实例
2014/11/06 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
python 测试实现方法
2008/12/24 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
举例讲解Python常用模块
2019/03/08 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
如何用python免费看美剧
2020/08/11 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
请说出以下代码输出什么
2013/08/30 面试题
护理人员的自我评价分享
2014/03/15 职场文书
早会主持词
2014/03/17 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书