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 相关文章推荐
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
cache_lite试用
2007/02/14 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python3 实现验证码图片切割的方法
2018/12/07 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
武侯祠导游词
2015/02/04 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript