导航栏切换效果

落日映苍穹つ 2022-05-17 01:06 402阅读 0赞

在网页中经常会遇到导航栏切换效果，也就是鼠标放到某一导航栏上，底下对应的内容就会发生变化．下面说一下实现思路：

首先说下this的用法：

this在事件中指向的是事件源对象，来看下面这段代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>try</title>
        <style type="text/css">
       *{
           padding: 0;
           margin: 0;
       }
       img{
           width:200px;
           height: 200px;
           float: left;
           margin:20px;
       }
        </style>
        <script>
        window.onload = function () {
            //抓到所有的img元素
            var imgs = document.getElementsByTagName('img');
            //循环所有的图片元素,给每个图片元素加单击事件
            for(var i = 0;i < imgs.length;   i++){
                imgs[i].onclick = function () {
                    //this指向的是事件源对象
                    this.style.visibility = 'hidden';
                }
            }
        }
        </script>
    
    <body id='hd'>
    <img src="01.jpg" alt="">
    <img src="02.jpg" alt="">
    <img src="03.jpg" alt="">
    <img src="04.jpg" alt="">
    <img src="05.jpg" alt="">
    <img src="06.jpg" alt="">
    <img src="07.jpg" alt="">
    <img src="08.jpg" alt="">
    </body>
    </html>

这段代码实现了点击８张图片中的任意一张，对应图片就消失的效果．思路是获得所有的图片元素，循环所有的图片元素，给每个图片元素加单击事件，this在这里指向的是事件源对象，也就是点击的对象，即点击的图片．

下面就说一下如何实现tab切换吧，

页面布局如下图：

![70][]

鼠标移动到某一块导航栏时触发onmouseover事件，对应的模块内容显示，其他模块内容隐藏，this指向事件源对象

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tab 选项卡效果</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            #tab{
                width:600px;
                height:500px;
                border:5px solid purple;
                margin:0 auto;
                position: relative;
            }
            #tab ul li{
                list-style: none;
                float: left;
                width:200px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 30px;
    
            }
            #tab .con{
                width: 580px;
                height: 420px;
                left:10px;
                top: 60px;
                position: absolute;//相对于父级元素定位一下
                display: none;
            }
        </style>
    </head>
    <script>
        window.onload = function(){
            var tab = document.getElementById("tab");//通过id 获取元素
            var lis = document.getElementsByTagName("li");//通过标签名获取元素
            var cons = document.getElementsByClassName("con");//通过class获取元素
            //循环遍历每一个li标签
            for(var i = 0; i < lis.length; i ++){
                lis[i].num = i;//给每一个标签加序号
                lis[i].onmouseover = function(){//给每一个标签li加onmouseover事件
                    //显示之前先让所有的con隐藏
                    for(var j = 0; j < cons.length; j ++){
                        cons[j].style.display = 'none';
                    }
                   // 让this.num对应的con显示,this在事件中指向的是事件源对象
                    cons[this.num].style.display  = 'block';
                }
            }
        }
    </script>
    <body>
    <div id="tab">
        <ul>
            <li style="background-color: blue;">新闻</li>
            <li style="background-color: orange;">热点</li>
            <li style="background-color: green;">军事</li>
    
        </ul>
    
        <div class="con" style="background-color: blue;display:block;"></div>
        <div class="con" style="background-color: orange"></div>
        <div class="con" style="background-color: green"></div>
    
    </div>
    
    </body>
    </html>

[70]: /images/20220517/64f5e93066304aa2b8c4f654671b0eca.png