來吧 Baby ！！！！

現在已經正式進入 JavaScript 階段了，學習 web前端最大的成就感就是專案能夠正確跑一邊的那一刻，今天來給大家講講一個點擊事件如何實作一下效果！！！！

以下是我們平常瀏覽網頁的時候最常見的一組操作，在導航欄上任意切換的一個效果，

做網頁的第一步，首先要搭建好結構，由下圖不難看出我們需要一個大盒子里面裝兩個小盒子，

實作結構搭建的代碼如下所示：

    <div class="box">
        <div class="inblock">
            <div class="in">所</div>
            <div>見</div>
            <div>即</div>
            <div>所</div>
            <div>得</div>
        </div>
        <div class="img">
            <img src="../images/111.jpg" alt="" class="on out">
            <img src="../images/222.jpg" alt="" class="on">
            <img src="../images/333.jpg" alt="" class="on">
            <img src="../images/444.jpg" alt="" class="on">
            <img src="../images/555.jpg" alt="" class="on">
        </div>
    </div>

接下來就是給我們的結構一個裝飾效果，學過 web 的都知道，CSS 是用來渲染我們網頁的，

        .box {
            border: 1px solid rgb(187, 186, 186);
            background-color: rgb(231, 227, 227);
        }

        .inblock>div {
            float: left;
            padding: 10px 20px;
            font-size: 25px;
        }

        .img>img {
            width: 100%;
        }

從專案圖上我們可以看出選中的字體是有一個背景顏色和一個字體顏色的變化，所以我們要先設定一個默認的樣式，給第一個字設定，我們這里的圖片也要處理，不處理的話全部圖片就會全部顯示在我們的界面上，我們現在所要實作的效果是點擊一個文字切換一張圖片，這里的 "on" 和 "out"類備用，

        .in {
            background-color: rgb(187, 27, 27);
            color: #fff;
        }

        .on {
            display: none;
        }

        .out {
            display: block;
        }

現在結構和樣式都已經寫好了，接下來就是使用 JS 來控制它的行為，讓它實作最終的點擊效果！

    <script>
        var inblock = document.querySelector('.inblock').querySelectorAll('div');
        var img = document.querySelector('.img').querySelectorAll('img')
        for (var i = 0; i < inblock.length; i++) {
            inblock[i].setAttribute('data-num', i);
            inblock[i].onclick = function () {
                for (var i = 0; i < inblock.length; i++) {
                    inblock[i].className = '';
                }
                this.className = 'in';
                var index = this.getAttribute('data-num');
                for (var i = 0; i < img.length; i++) {
                    img[i].className = 'on'
                }
                img[index].className = 'out'
            }
        }
    </script>

這段代碼就是需要點擊的物件和切換的圖片獲取過來，通過回圈給每個文字添加點擊事件，把剛剛我們寫好的類呼叫過來，這樣我們每點擊一個文字所呈現出來的效果就能實作了，

當然圖片要和文字一一對應所以就需要給文字添加一個自定義的類，并給上編號，從零開始，因為我們圖片獲取過來是以一個偽陣列的形式存在的，所以這里點擊的那個文字需要回傳此文字的編號，然后再選擇對應的圖片切換，

注意：這里的文字和圖片在點擊和切換的時候都需要用到排他思想！

排他思想就是先清除掉元素的全部樣式然后在給當前元素設定樣式！

接下來寶寶們不要吝嗇你們的一鍵三連：點贊 👍 評論 ?? 收藏 🌟

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/332115.html

標籤：其他

上一篇：＜JavaScript＞閉包

下一篇：前端必學——用JavaScript實作電商圖片放大鏡效果（附代碼）

所見即所得

來吧 Baby ！！！！