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

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

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

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

<!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. day7_python之面向对象高级-反射

    反射:通过字符串去找到真实的属性,然后去进行操作 python面向对象中的反射:通过字符串的形式操作对象相关的属性.python中的一切事物都是对象(都可以使用反射) 1.两种方法访问对象的属性 cl ...

  2. sublime text 3创建新文件插件-AdvanceNewFile

    这里要记录sublime text 3 在创建新文件时安装的插件–AdvanceNewFile ST本来自带的创建新文件的快捷键是ctrl+n.但是用户需要保存时才可修改名称以及文件路径.但是安装完A ...

  3. H3C-PPPOE

    --------------pppoe拨号V7------------------------------- dialer-group 10 rule ip permit interface Dial ...

  4. poj 1263 Reflections (Simple Geometry)

    1263 -- Reflections 简单计算几何.题目给出射线以及若干个不相交的圆,求出射线会在哪些圆上反弹,依次写出反弹球的编号. 代码如下: #include <cstdio> # ...

  5. oracle使用表的别名(Alias)

    当在SQL语句中连接多个表时, 请使用表的别名并把别名前缀于每个Column上.这样一来,就可以减少解析的时间并减少那些由Column歧义引起的语法错误.   (Column歧义指的是由于SQL中不同 ...

  6. 原生js实现计时器

    https://www.cnblogs.com/sandraryan/ 点击开始计时,可以计次,暂停.点了暂停可以继续计时,计次,点击重置清空. <!DOCTYPE html> <h ...

  7. html手机端全屏显示和溢出问题

    <meta name="viewport" content="width=1200, initial-scale=0.3"> initial-sca ...

  8. 2019-11-6-Roslyn-how-to-use-WriteLinesToFile-to-write-the-semicolons-to-file

    title author date CreateTime categories Roslyn how to use WriteLinesToFile to write the semicolons t ...

  9. [转]C#操作Memcached帮助类

    在VS中安装Memcached,直接在NuGet下搜索Memcached,选择第一个进行安装: 服务端资源下载地址:https://pan.baidu.com/s/1gf3tupl 接下来开始写程序, ...

  10. linux初始化和关停

    如已提到的, 模块初始化函数注册模块提供的任何功能. 这些功能, 我们指的是新功能, 可以由应用程序存取的或者一整个驱动或者一个新软件抽象. 实际的初始化函数定义常常 如: static int   ...