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

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

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

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

<!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. HDU 1372

    题意:模拟国际象棋马的走棋方式,和中国象棋一样马走日,8X8的棋盘,问从起点到终点的最短步数,国际象棋中数字代表行row,字母代表列column, 思路:记忆化深搜. #include<cstd ...

  2. Vue 父组件往子组件传递方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Python--day40--threading模块的几个方法

    import time import threading #threading.get_ident() 查看当前进程号 def wahaha(n): time.sleep(0.5) print(n,t ...

  4. js基础——流程控制语句

    1.if语句 if(条件表达式){    若条件成立只执行我,下面的分支不执行   }else if(条件表达式){   语句;  }else if(条件表达式){   语句;  }else{     ...

  5. H3C配置Trunk端口

  6. jQuery 工具类函数-使用$.extend()扩展Object对象

    除使用$.extend扩展工具函数外,还可以扩展原有的Object对象,在扩展对象时,两个对象将进行合并,当存在相同属性名时,后者将覆盖前者,调用格式为: $. extend (obj1,obj2,… ...

  7. promise 讲解

    Promise的出现  解决了 js 回调地狱得问题 回调地狱图 Promise解决回调地狱 是不是美观多了.. 实例化Promise时传入方法里的两个参数 resolve(成功的回调)和reject ...

  8. CF 453C. Little Pony and Summer Sun Celebration

    CF 453C. Little Pony and Summer Sun Celebration 构造题. 题目大意,给定一个无向图,每个点必须被指定的奇数或者偶数次,求一条满足条件的路径(长度不超\( ...

  9. HTML自制计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 查看当前android设备已安装的第三方包

    查看当前android设备已安装的第三方包 adb shell pm list package -3 2        adb shell "getprop ro.build.version ...