欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

當(dāng)在javascript中點(diǎn)擊菜單的選定字段時，如何動態(tài)地選擇和添加顏色

CSS
林雅南2年前8瀏覽0評論

我試著做一個菜單，給選中的菜單添加綠色，然后通過添加白色來取消選中其他的菜單，從上到下，反之亦然，我已經(jīng)試著編程了，但是效果不太好，你能告訴我我的錯誤在哪里嗎？

當(dāng)單擊任何菜單字段時，我希望它選擇我單擊的菜單字段，并將其涂成綠色，取消選擇其他字段，將其涂成白色。

此功能必須從上到下(從菜單的“主頁”字段到“關(guān)于”字段)和從下到上(從“關(guān)于”字段到菜單的主頁)工作，也就是說，在任何被單擊的方向上工作。

我的源代碼是:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>

        </style>
    </head>
    <body>

    <div class="container">
        <p class="menu">Home</p>
        <p class="menu">Gallery</p>
        <p class="menu">Technology</p>
        <p class="menu">Information</p>
        <p class="menu">Contact</p>
        <p class="menu">About</p>
    </div>

    <script>
        let menu = document.querySelectorAll('.menu');

        menu.forEach((btn, i) => {
            btn.addEventListener("click", (ev) =>{
                //console.log(ev.target); 

                // clicking from top to bottom or from home to about

                for(let bt = 0; bt < i; bt++){
                    menu[bt].style.background = '#FFFFFF';
                }

                //missing make the condition, when home is clicked, the selection or the green color should be removed, from the about menu.

                //----------------------------------------------

                // clicking from bottom to top or from about to home
                // it seems, it doesn't work, where is my mistake?


                for(let at = menu.length; at > i; at--){
                    menu[i].style.background = '#FFFFFF';
                }

                menu[i].style.background = '#BEFFC7';
            });
        });

    </script>
    </body>
</html> ```

每次單個菜單項(xiàng)被“點(diǎn)擊”時，沒有必要重新繪制所有菜單項(xiàng):

默認(rèn)情況下，CSS中的所有菜單項(xiàng)都是白色的。 在JS中，只切換被點(diǎn)擊的綠色菜單項(xiàng)的顏色(或者當(dāng)它已經(jīng)是綠色時切換為白色)。 可選轉(zhuǎn)向。懸停時菜單項(xiàng)為綠色。 小片

let container = document.querySelector('.container');
let current = null; // To hold reference to last 'clicked' menu item

container.addEventListener("click", (ev) =>{
    // When a .menu inside .container gets clicked
    if (ev.target.matches('.menu')) {
        // If 'current' exists/defined, make it white
        if (current) current.style.backgroundColor = '#fff';

        // Leave white if 'clicked' is current, otherwise toggle to green
        if (ev.target != current) ev.target.style.backgroundColor = '#beffc7';

        // Save reference to clicked element for next 'click'
        current = ev.target;
    };
});

body         { background-color: #efefef }
.menu        { background-color: white; cursor: pointer }
.menu:hover  { background-color: #beffc7 } /* [OPTIONAL] */

<div class="container">
    <p class="menu">Home</p>
    <p class="menu">Gallery</p>
    <p class="menu">Technology</p>
    <p class="menu">Information</p>
    <p class="menu">Contact</p>
    <p class="menu">About</p>
</div>

這個解決方案使用了兩個for，但我認(rèn)為使用forEach也是一樣的。

// bucle a través de cada campo del menu.
    // loop through each menu field.
    for (let i = 0; i < menu.length; i++) {
        // adjunte un evento de clic a cada campo del menu
        // attach a click event to each menu field
        menu[i].addEventListener('click', function() {
            for (let j = 0; j < menu.length; j++) {
                //eliminar la selecion activa de todos las campos del menu
                // remove the active selection from all menu fields
                menu[j].style.background = '#FFFFFF';
            }
            
            //agregar la seleccion activa a el campo del menu en la que se hizo clic
            // add the active selection to the clicked menu field
            menu[i].style.background = '#BEFFC7';
        });
    }

以下是使用forEach的解決方案

menu.forEach((btn, i) => {
        btn.addEventListener("click", (ev) =>{
            console.log(ev.target);
            for (let j = 0; j < menu.length; j++) {
                menu[j].style.background = '#FFFFFF';
            }
            menu[i].style.background = '#BEFFC7';
        });
    });