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

最新推荐文章于 2023-02-25 18:30:51 发布
最新推荐文章于 2023-02-25 18:30:51 发布
阅读量539 收藏 1
点赞数 1
分类专栏： 学习笔记 js学习 文章标签： javascript html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmefx/article/details/107856721
版权

文章目录

1、排他思想

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

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

思路:
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</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style-type: none;
    }

    .tab {
        width: 360px;
        margin: 100px auto;
    }

    .tab_list {
        height: 36px;
        border: 1px solid #DBDEE1;
        background-color: #F7F7F7;
    }

    .tab_list li {
        float: left;
        height: 35px;
        line-height: 36px;
        padding: 0 10px;
        text-align: center;
        cursor: pointer;
        font-size: 16px;
    }

    .tab_list .current {
        border-top: 3px solid #ff8400;
        background-color: #fff;
        margin-top: -1px;
        border-left: 1px solid #DBDEE1;
        margin-left: -1px;
        border-right: 1px solid #DBDEE1;
    }

    .tab_con {
        padding: 10px 0 0 0;
    }

    .item {
        display: none;
    }
</style>
<script>
    window.onload = function () {
        // 获取元素
        var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i; //记录索引号
            lis[i].onmouseover = function () {
                // 排他思想
                // 干掉所有人 
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 保留我自己 
                this.className = 'current';
                // 下面div显示内容模块
                // 干掉所有人 让其余的item 这些div 隐藏
                for (var j = 0; j < items.length; j++) {
                    items[j].style.display = 'none';
                }
                // 保留我自己 让对应的item 显示出来
                items[this.index].style.display = 'block';
            }
        }
    }
</script>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">图片</li>
                <li>专栏</li>
                <li>热点</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                图片部分
            </div>
            <div class="item">
                专栏部分
            </div>
            <div class="item">
                热点部分
            </div>
        </div>
    </div>
</body>

</html>

效果
在这里插入图片描述

2.2 多Tab栏

若直接使用单Tab的会出错，多个tab栏切换时需要用大盒子的id区分来封装个函数。

代码实现

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style-type: none;
    }

    .tab {
        width: 360px;
        margin: 100px auto;
    }

    .tab_list {
        height: 36px;
        border: 1px solid #DBDEE1;
        background-color: #F7F7F7;
    }

    .tab_list li {
        float: left;
        height: 35px;
        line-height: 36px;
        padding: 0 10px;
        text-align: center;
        cursor: pointer;
        font-size: 16px;
    }

    .tab_list .current {
        border-top: 3px solid #ff8400;
        background-color: #fff;
        margin-top: -1px;
        border-left: 1px solid #DBDEE1;
        margin-left: -1px;
        border-right: 1px solid #DBDEE1;
    }

    .tab_con {
        padding: 10px 0 0 0;
    }

    .item {
        display: none;
    }
</style>
<script>
    window.onload = function () {
        function bigbox(bigid) {
            var bigid = document.getElementById(bigid); //大盒子的id            
            var lis = bigid.querySelector('.tab_list').querySelectorAll('li');
            var items = bigid.querySelectorAll('.item');

            for (var i = 0; i < lis.length; i++) {
                lis[i].index = i;
                lis[i].onmouseover = function () {
                    //排他思想
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].className = '';
                    }
                    this.className = 'current';
                    for (var j = 0; j < items.length; j++) {
                        items[j].style.display = 'none';
                    }
                    items[this.index].style.display = 'block';

                    //或者合并代码（如下）
                    /*
                     * for (var j=0; j<lis.length;j++){
                     *   lis[j].className='';
                     *   items[j].style.display='none';
                     * }
                     * this.className='current';
                     * items[this.index].style.display='block';
                     */
                }
            }

        }
        bigbox('one');
        bigbox('two');
    }
</script>

<body>
    <div class="tab" id="one">
        <div class="tab_list">
            <ul>
                <li class="current">图片</li>
                <li>专栏</li>
                <li>热点</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                图片部分
            </div>
            <div class="item">
                专栏部分
            </div>
            <div class="item">
                热点部分
            </div>
        </div>
    </div>

    <div class="tab" id="two">
        <div class="tab_list">
            <ul>
                <li class="current">视频</li>
                <li>综艺</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                视频部分
            </div>
            <div class="item">
                综艺部分
            </div>
        </div>
    </div>
</body>

</html>

效果
在这里插入图片描述

小Try+
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之排他思想详述
m0_48375854的博客
11-25 3888
在前面的博客中，小熊更新了相关操作元素的方法，但是如果有同一组元素，我们想要某一个元素实现某种样式，这时需要怎么办呢？ 这里就要用到循环的排他思想。 排他思想的算法就是： 排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。 可以简单理解为： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 需要注意的是：这里的顺序不能颠倒。 比如，页面有五个按钮，我们想要给它实现循环点击事件：当点到哪个按钮，就让哪个按钮变
js 排他思想
llt299022的博客
02-08 65
<!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>Do
JavaScript【排他思想及其优化】
Coding
04-02 1874
JavaScript【排他思想及其优化】
JS中的排它思想
liu0218的博客
07-30 672
当我们在点击一个选项的时候，我们需要清空之前所点击的选项，首先我们先获取到所有选项卡的节点，然后利用循环给每个按钮添加事件，然后在里面嵌套一个循环，在点击这个按钮生效前一步清空之前的所有事件，保证只让当前点击的事件生效，从而实现排它！多个选项中无论如果只有一个会有样式，从而实现排它。......
JavaScript排他思想
qq_61716556的博客
05-22 2016
什么是排他思想？ 排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序。首先将所有元素的样式设置为一般样式(包括特定的某个元素)，再为特定元素设置特定样式。 排他思想的优势 排他思想适用于为多个同类型元素设置样式或效果的情况。避免为单个元素重复设置相同样式，可以有效显示出用户操作下某一元素的改变。 实现排他思想的步骤 为全部元素设置一般效果 为特定元素设置特定效果 <!DOCTYPE html> <html lang="en"> <head&gt
蓝桥杯学习资料大全-题目参考代码-排他平方数.zip
05-25
蓝桥杯学习资料大全-题目参考代码-排他平方数
Activiti 学习笔记八：排他网关（ExclusiveGateWay）
09-08
Activiti 学习笔记八：排他网关（ExclusiveGateWay）
非排他性动态机制设计-研究论文
06-10
大部分分析都集中在排他性环境（即，任何参与者都可以被排除在交易之外，而不会影响其他人的效用）。 然而，文献中提出的机制并未扩展到非排他性环境。 这种环境的两个典型例子是：(i) 公共项目，所有参与者必须...
Flowable深入浅出-15 Flowable-BPMN操作流程之排他网关
01-29
Flowable深入浅出-15 Flowable-BPMN操作流程之排他网关,欢迎进入我的专栏第15节查看，专栏地址:https://blog.csdn.net/houyj1986/column/info/31755
大数据有限排他权的基础理论.pptx
最新发布
10-23
大数据有限排他权的基础理论.pptx
js实现点击切换导航栏效果(排他思想)
weixin_46378070的博客
02-25 2556
使用html+css+js，实现简易导航栏切换效果
JS的排他思想
weixin_33961829的博客
06-07 1710
一、前言 Tab栏效果切换是常见的功能需求，它实际上运用的就是JS的排他思想。 那么，什么是排他思想呢？ 简而言之，就是在监听成立时，先把所有的样式清除为空，随后按照需求添加需要的样式。 二、案例分析 1. 需求分析 鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类); 2. 功能实现 思路：1.点亮盒子。 2.利用索引值显示盒子。 步骤： 1.获取事件源和相关元...
js中的排他思想
zhuxiaolong1234的博客
09-03 188
js中的排他思想
JS学习-----排他思想（算法）
m0_48716885的博客
01-24 1033
如果有同一组元素，我们想要一个元素实现某种样式，需要用到循环的排他思想算法。步骤如下： 1.所有元素全部清除样式。 2.给当前元素设置样式。 3.顺序不能颠倒，首先清除所有样式，然后在设置自己。 案例 ：设置一排按键，当我们点击，按键出现颜色变化，点击另外一个按键也出现颜色变化，而之前出现颜色变化的按键，恢复原样。 <div> <button type="button">按键1</button> <button type="button
JavaScript之排他思想
qq_45272615的博客
09-21 309
什么是排他思想？ 顺序一定不能颠倒 例：有5个按钮，当点击某一个按钮时，改变其背景颜色， 来实现此操作，第一想到的肯定是使用for循环，外加onclick点击事件，但是如果使用onclick function来实现的话，要写五次function，代码很繁琐，如果有很多个按钮，那实现起来真的想都不敢想，那么使用排他思想就会很快的实现。 js代码： <script> //获取按钮 var btns = document...
JS 编程思想：排他
qq_35112578的博客
08-04 107
代码】JS 编程思想：排他。
排他思想 （Js代码实现，有经典案例）
学习记录
03-19 969
排他思想（js实现) 如果有同一组元素，外卖想要某一个元素实现某种样式，需要用到循环的排他思想算法： 所有元素全部清空样式（干掉其他人） 给当前元素设置样式（留下自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 代码实现： <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <but
编程思维---排他思想
m0_73596760的博客
10-13 1634
JS 排他思想
vue中v-for中的排他思想
06-07
在Vue中，v-for指令用于渲染列表，如果要实现v-for中的排他思想，可以通过以下几种方式来实现： 1. 使用computed属性过滤数据 可以使用computed属性对数据进行过滤，然后在v-for指令中使用过滤后的数据进行渲染。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值