web API-事件基础-排他思想

Q _Q

已于 2023-07-07 17:51:29 修改

阅读量36

点赞数

文章标签：前端 html css3 javascript css

于 2023-07-07 17:48:50 首次发布

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131602040

版权

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        /*
            排他思想
            1 干掉所有
            2 复活自己
        */
        let lis = document.querySelectorAll('li')

        // 全部li都添加监听事件
        for (let index = 0; index < lis.length; index++) {
            // 1 干掉所有
            lis[index].addEventListener('click', function () {
                // 全都移除属性
                for (let j = 0; j < lis.length; j++) {
                    let li = lis[j];
                    li.classList.remove('active')
                }
                // 2 复活自己  再只给自己添加回属性
                this.classList.toggle('active')
            })
        }


    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        /*
            排他思想
            1 干掉所有(必须设置一个初始默认值)
            2 复活自己
        */
        let lis = document.querySelectorAll('li')

        // 全部li都添加监听事件
        for (let index = 0; index < lis.length; index++) {
            lis[index].addEventListener('click',function(){
                // 1 干掉所有
                document.querySelector('.active').classList.remove('active')
                // 2 复活自己  再只给自己添加回属性
                this.classList.add('active')
            })
        }
        


    </script>
</body>

</html>

效果图：