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 动态生成私有变量访问器
Dec 06 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
JavaScript常见继承模式实例小结
Jan 11 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生成EXCEL的东东
2006/10/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
JS高级笔记
2011/07/13 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
九年级物理教学反思
2014/01/29 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL