循环排他思想

最新推荐文章于 2022-10-13 10:58:46 发布
最新推荐文章于 2022-10-13 10:58:46 发布
阅读量227 收藏
点赞数
分类专栏： JS杂记 文章标签： javascript css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angry_rooster/article/details/117482666
版权

循环排他思想

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

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

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

<!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
    评论
专栏目录
JavaScript双重for循环实例（排它思想）
m0_64148060的博客
11-23 480
排他思想，双重for循环
DOM：排他思想练习，会使用到嵌套for循环或document.querySelector
weixin_46682277的博客
03-18 196
<div class="btn"> <button>按钮1</button> <button>按钮1</button> <button>按钮1</button> <button>按钮1</button> </div> <script> // 点击当前按钮 当前按钮背景颜色变绿 利用排他思想 干掉所有人 留下我自己 var btns = d
排他思想
weixin_48893653的博客
03-01 609
1.排他思想：假如有一组元素，我想要操作其中的一个元素，那么就需要用到循环中的排他思想。 2.代码案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>排他思想算法的实现</t
for循环排它算法（经典实用）
啊对对对的博客
07-07 366
核心代码 let lis = document.querySelectorAll("li"); for(let i = 0; i < lis.length; i ++) { lis[i].addEventListener("click", function() { // 循环排它------------------...
JS-DOM操作经典循环排他思想
世界和我们都不该止步于此
04-14 655
在JS的基础学习中，最经典的案例之一就是排他思想了，大家应该都玩过这个排他思想 本质就是双重for循环的的嵌套，实现排他的思想 我们今天利用案例来解释以下循环排他思想： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
mysql共享锁与排他锁用法实例分析
09-09
主要介绍了mysql共享锁与排他锁用法,结合实例形式分析了mysql共享锁与排他锁相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
SQL文排他设计（日文）
11-17
SQL文排他设计 有資源（データやファイル）に対して複数のアクセスが見込まれる場合に、同時アクセスにより不整合が発生することを防ぐため、あるトランザクションが共有資源（データやファイル）にアクセスしている...
Java编程实现排他锁代码详解
08-29
主要介绍了Java编程实现排他锁的相关内容，叙述了实现此代码锁所需要的功能，以及作者的解决方案，然后向大家分享了设计源码，需要的朋友可以参考下。
Flowable深入浅出-15 Flowable-BPMN操作流程之排他网关
01-29
Flowable深入浅出-15 Flowable-BPMN操作流程之排他网关,欢迎进入我的专栏第15节查看，专栏地址:https://blog.csdn.net/houyj1986/column/info/31755
Activiti 学习笔记八：排他网关（ExclusiveGateWay）
09-08
Activiti 学习笔记八：排他网关（ExclusiveGateWay）
[demo]循环的排他思想--当循环一组元素，只想让某个元素只执行某个样式时的方法
weixin_48047636的博客
04-27 211
<body> <!-- 写5个按钮 --> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <script> // 把所有按钮对象获取过来
tab栏制作：排他思想
qq_42931285的博客
04-16 364
tab栏制作，排他思想
JS获取元素、获取元素属性、添加自定义属性、排他思维、for循环制作tab导航栏。
QinGP97的博客
08-21 197
JS获取元素、获取元素属性、添加自定义属性、排他思维、for循环制作tab导航栏。
选择排序两层遍历的目的
鸭梨的博客
05-25 281
思想 选择排序思想: 第一次从arr[0]~ arr[n-1]中选取最小值，与arr[0]交换， 第二次从arr[1]到 arr[n-1]中选取最小值，与arr[1]交换， 第三次从arr[2]到arr[n-1]中选取最小值，与arr[2]交换， .， 第i次从arr[i-1]^ arr[n-1]中选取最小值，与arr[i-1]交换，.， 第n-1次从arr[n-2]到 arr[n-1]中选取最小值，与arr[n-2]交换，总共通过n-1次，得到一个按排序码从小到大排列的有序序列。 python 实现
排他思想，自定义属性操作，tab切换栏
qq_66198247的博客
06-19 290
排他思想，百度换肤，tab栏切换，自定义属性的操作，表单全选取消，表单隔行换色等案例学习~
编程思维---排他思想
m0_73596760的博客
10-13 1655
JS 排他思想
操作元素之修改样式属性
leechoy
06-12 617
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
JS中的遍历、点击、排他
rainy_killer的博客
03-27 1042
JS中遍历对象的方法 for…in方法 Object.keys(obj) Object.values(obj) obj:要返回其枚举自身属性的对象 返回值：一个表示给点对象的所有属性的键或值得数组 使用Object.getOwnProjectyNames(obj) 返回一个数组，包含自身所有属性（包括不可枚举的属性） 遍历可以获取key和value <!DOCTYP...
排他思想(算法)
休思_J的博客
05-29 5096
排他思想(算法) 给一组相同的元素添加相同的事件，利用for循环来实现。 代码验证 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1.
vue中如何使用排他思想
最新发布
07-10
在Vue中使用排他思想，可以通过以下几种方式实现： 1. 使用v-if或v-show指令：您可以根据条件来决定显示或隐藏某个组件或元素。通过给多个组件或元素设置不同的条件，可以实现只显示其中一个的效果。例如： ```html <div v-if="selectedTab === 'tab1'">Tab 1 content</div> <div v-if="selectedTab === 'tab2'">Tab 2 content</div> <div v-if="selectedTab === 'tab3'">Tab 3 content</div> ``` 2. 使用计算属性：您可以根据条件返回特定的组件或元素。通过在计算属性中判断选中的标签，然后返回对应的内容，可以实现排他性。例如： ```html <template> <div> <component :is="selectedTabComponent"></component> </div> </template> <script> export default { data() { return { selectedTab: 'tab1' }; }, computed: { selectedTabComponent() { if (this.selectedTab === 'tab1') { return 'Tab1Component'; } else if (this.selectedTab === 'tab2') { return 'Tab2Component'; } else if (this.selectedTab === 'tab3') { return 'Tab3Component'; } } } }; </script> ``` 3. 使用Vue Router：如果您的排他性是在不同的路由之间切换，您可以使用Vue Router来实现。通过定义不同的路由，并使用`<router-view>`来渲染当前路由的组件，可以实现排他性。例如： ```html <template> <div> <router-link to="/tab1">Tab 1</router-link> <router-link to="/tab2">Tab 2</router-link> <router-link to="/tab3">Tab 3</router-link> <router-view></router-view> </div> </template> <script> import Tab1Component from './Tab1Component.vue'; import Tab2Component from './Tab2Component.vue'; import Tab3Component from './Tab3Component.vue'; export default { components: { Tab1Component, Tab2Component, Tab3Component } }; </script> ``` 以上是几种在Vue中实现排他性的方法。您可以根据具体情况选择适合您的方式来实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值