循环排他思想

最新推荐文章于 2022-10-13 10:58:46 发布

凶鸡

最新推荐文章于 2022-10-13 10:58:46 发布

阅读量229

点赞数

分类专栏： JS杂记文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/angry_rooster/article/details/117482666

版权

JS杂记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

循环排他思想

在构造一个网页时，往往会涉及到如标签栏等的构造，我们往往需要往这些内容添加一些交互效果，最常见的就是点击效果、以下以标签栏为例，讲述一下循环排他思想

对于一个标签栏，假设当我点击其中一个标签项时，它的背景色会发生变化，而其他的标签项保持原有背景色，而当我再点击另一个标签项时，我希望的是当前被点击的标签项变色，其他保持原有颜色，这就需要使用到循环排他思想了

所谓的循环排他思想就是通过循环将原先不同的内容清除，再为特定目标赋予特定内容。最典型的应用场景就是先将多个相同项的样式恢复原样，再为特定项设置特定样式。这么做的是因为在不利用任何标记的情况下，我们不知道原有的“不同项”是哪个，无法精确“清除”，这就需要循环一遍来“恢复”，再为特定项设置特定的内容

<!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>循环排他</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            display: inline-block;
            border: 3px solid red;
            list-style: none;
            overflow: hidden;
        }

        li {
            float: left;
            width: 50px;
            line-height: 30px;
            background-color: pink;
            text-align: center;
            margin: 0 5px;
        }

        .current {
            background-color: gray;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        let lis = document.querySelectorAll("li");
        for(let i = 0; i < lis.length; i ++) {
            lis[i].addEventListener("click", function() {
            	// 循环排他！！！
                for(let i = 0; i < lis.length; i ++) {
                    lis[i].className = "";
                }
                this.className = "current";
            });
        }

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

代码效果

上述代码可以实现当点击其中一个项时，该项背景色变为灰色，其他保持原样，这就是循环排他的应用

凶鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
循环排他思想

循环排他思想在构造一个网页时，往往会涉及到如标签栏等的构造，我们往往需要往这些内容添加一些交互效果，最常见的就是点击效果、以下以标签栏为例，讲述一下循环排他思想对于一个标签栏，假设当我点击其中一个标签项时，它的背景色会发生变化，而其他的标签项保持原有背景色，而当我再点击另一个标签项时，我希望的是当前被点击的标签项变色，其他保持原有颜色，这就需要使用到循环排他思想了所谓的循环排他思想就是通过循环将原先不同的内容清除，再为特定目标赋予特定内容。最典型的应用场景就是先将多个相同项的样式恢复原样，再为特定项设
复制链接

扫一扫

专栏目录