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

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

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

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

<!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. oracle函数 log(x,y)

    [功能]返回以x为底的y的对数 [参数]x,y,数字型表达式, [条件]x,y都必须大于0 [返回]数字 [示例] select power(4,2),log(16,2),1/log(16,4) fr ...

  2. 虎牙在全球 DNS 秒级生效上的实践

    本文整理自虎牙中间件团队在 Nacos Meetup 的现场分享,阿里巴巴中间件受权发布. 这次分享的是全球 DNS 秒级生效在虎牙的实践,以及由此产生的一些思考,整体上,分为以下5各部分: 背景介绍 ...

  3. Android Studio(九)：引用jar及so文件

    Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...

  4. Project Euler Problem 21-Amicable numbers

    先说最暴力的算法,直接对一万内的每个数字暴力分解因子(对每个数字的时间复杂度是O(sqrt(n)的),然后,用个数组记录下来因子和,然后寻找 亲密数. 好一点:要先打个素数表,然后对每个数字,分解素因 ...

  5. activiti工作流引擎之uel表达式

    qq讨论群:313032825本人做了一个微信公众号,用于分享各类视频学习资源和我多年学习经验,喜欢的可以关注哦! 有了前面几章,我们肯定有一定的困惑,activiti如何与实际业务整合,比如一条采购 ...

  6. H3C 802.11协议的发展

  7. oracle 用EXISTS替换DISTINCT

    当提交一个包含一对多表信息(比如部门表和雇员表)的查询时,避免在SELECT子句中使用DISTINCT. 一般可以考虑用EXIST替换 例如: 低效: SELECT DISTINCT DEPT_NO, ...

  8. 关于XIFF开发IM的一些想法

    因为发现网上XIFF的资料真的不多,何况现在gg又被和谐,查询资料很是不便.我写这篇文章的目的除了跟大家分享一些开发心得,也希望有类似经验的朋友看到文章后有机会多多交流. 之前我没有怎么接触过flas ...

  9. Project Euler Problem 8-Largest product in a series

    直接暴力 写完才想到,代码写矬了,扫一遍就出结果了,哪还用我写的这么麻烦 ss = '''73167176531330624919225119674426574742355349194934 9698 ...

  10. C#循环语句练习(三)

    for循环拥有两类:一.穷举:把所有可能的情况都走一遍,使用if条件筛选出来满足条件的情况. (1).羽毛球拍15元,球3元,水2元.200元每种至少一个,有多少可能. (2).百鸡百钱:公鸡2文钱一 ...