先来看看需要实现的需求：

这是某购物网站上经常看到的效果

我们把网页的模型抽象出来，下面是我实现的效果图：

源代码仅供大家参考，具体如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    li {

        list-style: none;

        cursor: pointer;

    }

    .header {

        height: 25px;

        width: 100%;

        height: 25px;

        line-height: 25px;

        padding-bottom: 1px;

    }

    /* 控制其显示和隐藏 */

    .show {

        width: 100%;

        height: 100%;

        display: block !important;

    }

    /* 其子元素为隐藏状态 */

    .wrapper > div{

        display: none;

    }

    .wrapper {

        height: 600px;

        width: 100%;

        margin: 0 auto;

    }

    /* 添加下划线 */

    .add2line {

        color: #3385ff;

        border-bottom: 1px solid #3385ff;

    }

    .header-tab {

        display: flex;

        justify-content: center;

    }

    .header-tab {

        background-color: pink;

    }

    .box1 {

        width: 100%;

        height: 100%;

        background-color: skyblue;

    }

    </style>

</head>

<body>

    <nav class="header">

        <ul class="header-tab" id="box">

            <li class="add2line">更新内容</li>

            <li>使用说明</li>

            <li>福利中心</li>

            <li>上架物品</li>

            <li>我的宠物</li>

        </ul>

    </nav>

    <main class="wrapper">

        <div class="content show">

           <div class="box1">页面一</div>

        </div>

        <div class="content">

            <div class="box1">页面二</div>

        </div>

        <div class="content">

           <div class="box1">页面三</div>

        </div>

        <div class="content">

            <div class="box1">页面四</div>

        </div>

        <div class="content">

            <div class="box1">页面五</div>

        </div>

    </main>

</body>

</html>

<script>

   window.onload = function () {

       isShow()

       function isShow () {

           let liArr = document.querySelectorAll('#box > li')

           let divArr = document.querySelectorAll('.wrapper .content')

           for (let i = 0; i < liArr.length; i++) {

               liArr[i].index = i;

            //    onmouseover事件会在鼠标指针移动到指定的对象上时触发事件发生

            //    也可以把其改成鼠标点击事件 onclick

               liArr[i].onmouseover = function () {

                   for (let j = 0; j < liArr.length; j++) {

                    liArr[j].className = ''

                    divArr[j].className = ''

                   }

                   divArr[this.index].className = 'show'

                   liArr[this.index].className = 'add2line'

               }

           }

       }

   }

</script>

js菜单栏切换的更多相关文章

  1. chromedriver禁用图片，禁用js，切换UA

    selenium 模拟chrome浏览器,此时就是一个真实的浏览器,一个浏览器该加载的该渲染的它都加载都渲染,所以爬取网页的速度很慢.如果可以不加载图片等操作,网页加载速度就会快不少,代码中列出了了禁 ...

  2. 慕课编程题JS选项卡切换

    Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...

  3. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

  4. HTML页面嵌入视频和JS控制切换视频的问题

    文章摘自:http://www.cnblogs.com/jorton/archive/2012/03/19/vidio_in_site.html 首先,在页面中嵌入视频的HTML代码为: 1 < ...

  5. JS 菜单栏一直悬浮在顶部代码

    只需要把下面代码放到js中: $(function(){                //获取要定位元素距离浏览器顶部的距离         var navH = $(".menu&quo ...

  6. js 图片切换效果

    效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

  7. js选项卡切换效果

    选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...

  8. js 动态切换视频

    如图所示,想要一个这样的效果,就是点击下面视频标题时,上面的视频跟着切换,但是要求页面不重新加载. 参考文章在这里 这里贴上部分代码供大家参考. <li id="about_li6&q ...

  9. Webdriver实现对菜单栏的灵活切换功能，附上代码，类似的菜单栏切换可以自己封装

    有时一级菜单下可能会有二级菜单,这时就需要对其下面的元素进行判断,如果使用webdriver原生的方法去获取未知的元素进行判断,显然是不可能的,因为webdriver本身就是基于明确的元素进行定位的, ...

随机推荐

  1. docker + jenkins 自动化部署

    公司书架上有本docker的书籍,正好最近事不多就写个demo来玩一玩. DevOps未死,ContainerOps已到 ContainerOps VS DevOps 避免了复杂的环境,应用之间的相互 ...

  2. 使用模块定义AngularJS组件

    一.模块创建/查找 module 当创建一个模块时,必须指定name和requires参数,即使你的模块并不存在依赖 var myApp=angular.module("exampleApp ...

  3. phpStudy本地环境测试，打开网页很慢的解决办法！

    很多人应该都遇到了在使用phpStudy本地环境测试软件时候打开很慢的问题,甚至动辄达到了1000ms以上,开篇直接给出解决办法: 下面给大家介绍phpstudy访问速度慢的解决办法. 1.修改mys ...

  4. idea各种中文显示乱码解决大全

    本文链接:https://blog.csdn.net/liqimo1799/article/details/81811153中文乱码问题分类: 编码普通中文乱码properties文件中文乱码cons ...

  5. codedecision P1113 同颜色询问 题解 线段树动态开点

    题目描述:https://www.cnblogs.com/problems/p/11789930.html 题目链接:http://codedecision.com/problem/1113 这道题目 ...

  6. Springboot学习笔记（一）—— 安装

    springboot越来越流行了,相比较于springMVC,springboot采用了一种约定大于配置的理念,可以一键安装,一键运行,一键部署,内置tomcat,省去了一大堆配置的时间,并且,spr ...

  7. P1020 从大到小排序

    题目描述 给你n个整数,请你按照从大到小的顺序输出它们. 输入格式 输入的第一行包含一个整数 \(n(1 \le n \le 10^3)\) ,用于表示元素的个数. 输入的第二行包含 \(n\) 个整 ...

  8. Vue中qs插件的使用

    qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库. 在项目中使用命令行工具输入:npm install qs安装完成后在需要用到的组件中:import qs from ‘qs’具体使用中 ...

  9. CDM命令实现MySql数据库文件的导出导入

    1.首先进入MySQL的安装目录,找到Bin文件夹,我这里安装的目录是C:\Program Files\MySQL\MySQL Server 8.0\bin ,进入该文件夹后在空白处按下Shift键+ ...

  10. [经典SQL语句]根据父级ID查找所有子级ID，并将所有ID用逗号隔开返回

    树形表结构: id parentID isDel 1 0 0 2 1 0 3 1 1 4 2 0 5 2 0 一)根据父级ID查找所有子级ID,并将所有ID用逗号隔开返回 ID=,需要返回的结果(条件 ...