JS 基础- 排他思想（个人笔记）

最新推荐文章于 2024-05-05 16:12:15 发布

小Try+

最新推荐文章于 2024-05-05 16:12:15 发布

阅读量560

点赞数 1

分类专栏：学习笔记 js学习文章标签： javascript html js css

本文链接：https://blog.csdn.net/cmefx/article/details/107856721

版权

文章目录

1、排他思想

如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（保留我自己）
注意顺序不能颠倒

思路:
a. 选择需要的一类标签，获得一个伪数组；
b. 用for()循环遍历获得的伪数组，排除其他（包括自己）的所有样式；
c. 遍历后用this改变自己的样式。

代码实现

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .change {
    
        background-color: skyblue;
    }
</style>
<script>
    window.onload = function () {
    
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
    
            btns[i].index = i; //记录索引号
            btns[i].onclick = function () {
    
                //把所有按钮的颜色去掉 --->干掉所有人（包括自己）
                for (var i = 0; i < btns.length; i++) {
    
                    btns[i].className = '';
                }
                //改变当前颜色  ---> 保留我自己
                this.className = 'change';
            }
        }
    }
</script>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <button>按钮6</button>
</body>

</html>

2、应用

应用案例 新浪新闻页：如图
在这里插入图片描述

实现方法：
最外面一个大盒子，大盒子里上面一个放按钮，下面一个盒子放div，且上下个数对应。移动鼠标，按钮颜色变化且相应的盒子出现。

2.1 单Tab栏

代码实现

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

<head>
    <meta charset="UTF-8">
    <title>Document

最低0.47元/天解锁文章

小Try+

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 基础- 排他思想（个人笔记）

文章目录1、排他思想2、应用2.1 单Tab栏2.2 多Tab栏1、排他思想如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法：所有元素全部清除样式（干掉其他人）给当前元素设置样式（保留我自己）注意顺序不能颠倒思路:a. 选择需要的一类标签，获得一个伪数组；b. 用for()循环遍历获得的伪数组，排除其他（包括自己）的所有样式；c. 遍历后用this改变自己的样式。代码实现<!DOCTYPE html><html lang="en"
复制链接

扫一扫