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中callee与caller的用法和应用场景
Dec 08 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jQuery的ready方法详解
Nov 27 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
Vue实现购物车功能
Apr 27 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
原生JavaScript实现随机点名表
Jan 14 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 stream_context_create()作用和用法分析
2011/03/29 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
php curl常用的5个经典例子
2017/01/20 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
javascript 写类方式之一
2009/07/05 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
javascript 实现map集合
2015/04/03 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
JS删除String里某个字符的方法
2021/01/06 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python全局变量引用与修改过程解析
2020/01/07 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
PHP面试题集
2016/12/18 面试题
2015年求职自荐信范文
2015/03/04 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
小学毕业感言100字
2015/07/30 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
python 命令行传参方法总结
2021/05/25 Python