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 遍历验证所有文本框的值
Aug 27 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
javascript的内存管理详解
Aug 07 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 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
php计算十二星座的函数代码
2012/08/21 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
总结Javascript中的隐式类型转换
2016/08/24 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python随机模块random使用方法详解
2020/02/14 Python
Python datetime模块使用方法小结
2020/06/18 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Django数据统计功能count()的使用
2020/11/30 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
关于递归的一道.NET面试题
2013/05/12 面试题
个人求职信范文分享
2014/01/06 职场文书
初中成绩单评语
2014/12/29 职场文书
小班上学期个人总结
2015/02/12 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
铁人观后感
2015/06/16 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python