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

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

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

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

<!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. div 禁止点击

    今天需要这个需求,原来真的有 style="pointer-events: none;"

  2. STS Eclipse IDEA 指定启动JDK版本

    使用场景: 开发人员在自己的机器上可能装了多个版本的JDK,但是在环境变量中只能配置一个 JAVA_HOME ,so你的IDEA Eclipse 可能因为你在 JAVA_HOME 配置JDK1.8 以 ...

  3. 安装visualStudio 出现 cant install Microsoft.TeamFoundation.OfficeIntegration.Resources

    本文告诉大家在安装 VisualStudio 时出现cant install Microsoft.TeamFoundation.OfficeIntegration.Resources如何安装 如果在安 ...

  4. poj 2689 Prime Distance （素数二次筛法）

    2689 -- Prime Distance 没怎么研究过数论,还是今天才知道有素数二次筛法这样的东西. 题意是,要求求出给定区间内相邻两个素数的最大和最小差. 二次筛法的意思其实就是先将1~sqrt ...

  5. c语言中的字节数关系、

    转载自:传送门 16位编译器 char :1个字节 char*(即指针变量): 2个字节 short int : 2个字节 int:  2个字节 unsigned int : 2个字节 float: ...

  6. 智课雅思短语---三、unshakable duty

    智课雅思短语---三.unshakable duty 一.总结 一句话总结:不可推卸的义务 unshakable duty 1.satisfy/ meet the needs of…? 满足需求 2. ...

  7. Codeforces Round #187 (Div. 1 + Div. 2)

    A. Sereja and Bottles 模拟. B. Sereja and Array 维护全局增量\(Y\),对于操作1(即\(a_{v_i}=x\))操作,改为\(a_{v_i}=x-Y\). ...

  8. 简单的Spring Batch示例

    使用Spring Batch做为批处理框架,可以完成常规的数据量不是特别大的离线计算. 现在写一个简单的入门版示例. 这里默认大家已经掌握了Spring Batch的基本知识,示例只是为了快速上手实践 ...

  9. dotnet 设计规范 · 数组定义

    本文告诉大家数组定义需要知道的规范,本文翻译 docs dotnet ✓ 建议在公开的 API 使用集合而不是数组.集合可以提供更多的信息. X 不建议设置数组类型的字段为只读.虽然用户不能修改字段, ...

  10. laravel构造函数和中间件执行顺序问题

    今天想重构下代码结构: BaseController.php 放置公共的中间件 class BaseController { public function __construct(){ $this- ...