1.排他思想的含义

排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序。首先将所有元素的样式设置为一般样式(包括特定的某个元素)，再为特定元素设置特定样式。

2.如何实现排他思想

（1）先将所有元素设置为一般状态

（2）再将特定元素设置为特殊效果

排他思想在 JavaScript 中的深入讲解

排他思想在 JavaScript 编程中是指在一组元素中，确保只有一个元素具有某种特定状态（如被选中、高亮等），而其他元素都不具有这种状态。这个思想常用于处理诸如选项卡、单选按钮、菜单导航等需要互斥操作的场景。

原理

排他思想的基本原理是：

当某个元素被操作（如点击）时，首先清除其他所有元素的特定状态。
然后，为当前被操作的元素设置特定状态。

实现步骤

获取元素集合：首先，通过选择器获取所有相关的元素。
遍历元素集合并添加事件监听：对每个元素添加事件监听器，如 click 事件。
清除所有元素的状态：在事件监听器内部，首先遍历所有元素并清除它们的特定状态。
设置当前元素的状态：最后，为当前操作的元素设置特定状态。

示例

以一个简单的选项卡切换为例，来具体演示如何使用排他思想。

HTML:

<div class="tabs">
    <div class="tab">Tab 1</div>
    <div class="tab">Tab 2</div>
    <div class="tab">Tab 3</div>
</div>

CSS:

.tab {
    padding: 10px;
    display: inline-block;
    cursor: pointer;
}

.tab.active {
    background-color: #f0f0f0;
    font-weight: bold;
}

JavaScript:

// 获取所有选项卡元素
let tabs = document.querySelectorAll(".tab");

// 遍历所有选项卡元素并添加点击事件监听器
for (let i = 0; i < tabs.length; i++) {
    tabs[i].onclick = function() {
        // 首先清除所有选项卡的active类
        for (let j = 0; j < tabs.length; j++) {
            tabs[j].classList.remove("active");
        }
        // 为当前点击的选项卡添加active类
        this.classList.add("active");
    }
}

应用场景

排他思想可以应用于以下常见场景：

选项卡切换：如上例所示，在一组选项卡中，点击一个选项卡时，显示对应内容，并取消其他选项卡的高亮状态。
导航菜单：在一个导航菜单中，点击某个菜单项时，将其设置为活动状态，并取消其他菜单项的活动状态。
单选按钮组：在一组单选按钮中，确保只有一个按钮被选中。
图片轮播：在一个图片轮播组件中，点击某个缩略图时，高亮显示该缩略图，并取消其他缩略图的高亮显示，同时显示对应的大图。
表单验证：在多步表单中，当完成当前步骤并进入下一步骤时，标记当前步骤为完成状态，取消其他步骤的完成状态。

进一步优化

在现代 JavaScript 编程中，我们可以使用更简洁和高效的方式实现排他思想，比如使用事件委托和 ES6 语法：

document.querySelector(".tabs").addEventListener("click", function(event) {
    if (event.target.classList.contains("tab")) {
        document.querySelectorAll(".tab").forEach(tab => tab.classList.remove("active"));
        event.target.classList.add("active");
    }
});

在这个优化的例子中，我们利用了事件委托，将点击事件监听器添加到父元素上，这样可以减少事件监听器的数量，提高性能和维护性。

总结

排他思想是一种非常实用的编程模式，尤其在处理需要互斥操作的元素时非常有效。通过掌握这一思想，可以更好地实现如选项卡切换、导航菜单等常见的交互效果，提高用户体验。

【功能实现】折叠手风琴

介绍

本次挑战需要实现图片折叠的效果，请使用 jQuery 语法完成代码。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── css
│   └── style.css
├── images
│   ├── pic1.jpeg
│   ├── pic2.jpeg
│   ├── pic3.jpeg
│   ├── pic4.jpeg
│   └── pic5.jpeg
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

其中：

css/style.css 是页面样式文件。
images 是项目所用到的图片文件夹。
js 是放置 js 代码的文件夹。
index.html 是页面布局。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。打开环境右侧的【Web 服务】，就可以在浏览器中看到当前页面，点击图片，被折叠的图片不会展开。

图片[1]曙光博客-随笔小窝【悲战蓝桥杯国赛】排他思想曙光博客-随笔小窝曙光博客

目标

请完善 index.js 文件，让页面具有如下所示的效果：

图片[2]曙光博客-随笔小窝【悲战蓝桥杯国赛】排他思想曙光博客-随笔小窝曙光博客

规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="options">
        <div class="option active" style="--optionBackground:url(../images/pic1.jpeg);" id="item1">
            <div class="shadow"></div>
        </div>
        <div class="option" style="--optionBackground:url(../images/pic2.jpeg);" id="item2">
            <div class="shadow"></div>
        </div>
        <div class="option" style="--optionBackground:url(../images/pic3.jpeg);" id="item3">
            <div class="shadow"></div>
        </div>
        <div class="option" style="--optionBackground:url(../images/pic4.jpeg);" id="item4">
            <div class="shadow"></div>
        </div>
        <div class="option" style="--optionBackground:url(../images/pic5.jpeg);" id="item5">
            <div class="shadow"></div>
        </div>
    </div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>

// 获取opitions
let option=document.querySelectorAll(".option")
for(let i=0;i<option.length;i++){
    option[i].onclick=function(){
        for(let j=0;j<option.length;j++){
            option[j].classList.remove("active")
           }
        this.classList.add("active")
    }
}
这段代码使用了排他思想来处理一组选项的点击事件。排他思想是一种常见的前端编程技巧，用于处理一组互斥的元素，例如单选按钮或选项卡。

现在来解释代码的逻辑：

1. `let option=document.querySelectorAll(".option")`: 这一行代码选择了具有 `.option` 类的所有元素，并将它们存储在一个名为 `option` 的 NodeList 中。
   
2. `for(let i=0;i<option.length;i++){...}`: 这是一个循环，遍历了 `option` NodeList 中的每个元素。

3. `option[i].onclick=function(){...}`: 对于每个选项元素，绑定了一个点击事件处理函数。当某个选项被点击时，将执行该函数。

4. `for(let j=0;j<option.length;j++){...}`: 这是一个内部的循环，用于遍历所有选项元素。

5. `option[j].classList.remove("active")`: 在内部循环中，首先移除了所有选项元素的 `active` 类，这样可以确保只有一个选项处于活动状态。

6. `this.classList.add("active")`: 在点击的选项元素上添加了 `active` 类，表示该选项处于活动状态。

这样，通过排他思想，每次只有一个选项被激活，其他选项都会被取消激活状态，从而实现了一种只能选择一个选项的效果。

功能实现】卡片化标签页

介绍

选项卡功能在前端开发中特别常见，作为设置选项的模块，每个选项卡代表一个活动的区域，点击不同的区域，即可展现不同的内容，这样既能节约页面的空间又能提升页面性能。

本题需要在已提供的基础项目中使用 JS 完成选项卡功能的编码，最终实现切换选项卡可以显示对应内容的效果。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── css
│   └── index.css # 页面样式文件
├── imgs # 静态图片
├── index.html # 页面布局
└── js
    └── index.js # 页面功能实现的逻辑代码

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果，当前显示仅有静态布局，并未实现选项卡切换功能。

目标

请在 index.js 文件中根据现有 DOM 结构（页面布局部分不能做任何修改操作）实现选项卡动态切换功能。

页面效果如下所示：

规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>选项卡切换</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>
  <body>
    <div id="main">
      <div class="tabs">
        <div class="red active">选项一</div>
        <div class="green">选项二</div>
        <div class="blue">选项三</div>
        <div class="yellow">选项四</div>
      </div>
      <div id="content">
        <div id="one" class="active">
          <p>
            爱情要完结的时候自会完结，到时候，你不想画上句号也不行。爱情，原来是含笑饮毒酒。
          </p>
          <img src="./imgs/1.jpeg" />
        </div>
        <div id="two">
          <p>
            在这个光怪陆离的人间，没有谁可以将日子过的行云流水。但我始终相信，走过平湖山雨，岁月山河，那些历尽劫数，尝遍百味的人，会更加生动而干净。
          </p>
          <img src="./imgs/2.jpeg" />
        </div>
        <div id="three">
          <p>
            对于三十岁以后的人来说，十年八年不过是指缝间的事，而对于年轻人而言，三年五年就可以是一生一世。
          </p>
          <img src="./imgs/3.jpeg" />
        </div>
        <div id="four">
          <p>
            我要你知道，在这个世界上总有一个人是等着你的，不管在什么时候，不管在什么地方，反正你知道，总有这么个人。
          </p>
          <img src="./imgs/4.jpeg" />
        </div>
      </div>
    </div>
  </body>
  <script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
	<script>
		// 实现选项卡功能
function init() {
  // 获取所有选项卡元素
  let tabs = document.querySelector(".tabs").querySelectorAll("div");
  // 获取所有内容区域元素
  let content = document.querySelector("#content").querySelectorAll("div");

  // 遍历所有选项卡元素并添加点击事件监听器
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].onclick = function() {
      // 清除所有选项卡和内容区域的活动状态
      for (let j = 0; j < tabs.length; j++) {
        tabs[j].classList.remove("active");
        content[j].classList.remove("active");
      }
      // 将当前点击的选项卡和内容区域设置为活动状态
      this.classList.add("active");
      content[i].classList.add("active");
    }
  }
}

// 初始化函数
init();

	</script>
</html>

文章版权声明 1、本网站名称：曙光博客
2、本站永久网址：pqblog.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ86512进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END