本教程详细阐述了如何使用JavaScript和CSS实现一个常见的交互模式：当点击页面中的某个元素时，为其添加一个特定的激活类名，并同时确保其他所有同级元素移除该激活类名。核心技术包括利用Array.from()将HTMLCollection转换为数组，结合filter()方法高效地筛选非当前元素，并使用classList API进行类名管理，从而创建独占式的激活状态。
独占式类名切换的实现原理与实践
在现代Web应用中，我们经常需要实现一种交互效果，即点击一组元素中的某一个时，该元素获得一个“激活”状态（通常通过添加一个CSS类名来表示），而同组中的其他元素则自动解除激活状态。例如，导航菜单、手风琴折叠面板或图片画廊的选中状态。本教程将详细介绍如何利用原生JavaScript和CSS来实现这种独占式的类名切换功能。
基础HTML结构
首先，我们需要一个包含多个可交互元素的HTML结构。这里我们以两个section元素为例，它们都位于一个main容器内。
@@##@@ @@##@@
注意： 原始示例中两个section都使用了id="swup"。在HTML标准中，id属性在整个文档中必须是唯一的。为了符合最佳实践，我们已将其修改为id="section1"和id="section2"。
立即学习“Java免费学习笔记（深入）”；
样式定义
接下来，我们为这些元素定义基础样式和激活状态的样式。当section元素拥有open类时，它的背景色将变为红色，以清晰地表示其激活状态。
body {
margin: 0;
}
main {
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
}
section {
transition: all 300ms ease-in-out;
padding-top: 2em;
flex-grow: 2;
flex-basis: 0;
display: flex;
flex-direction: column;
cursor: pointer; /* 添加光标提示可点击 */
}
section:nth-child(1) {
background-color: lightblue;
}
section:nth-child(2) {
background: rgb(137, 110, 148);
}
/* 激活状态的样式 */
section.open {
background: red;
}
img {
width: 90%;
align-self: center;
}JavaScript交互逻辑
核心的交互逻辑通过JavaScript实现。我们的目标是：当点击一个section时，如果它当前没有open类，就添加；如果它有open类，就移除。同时，所有其他section元素必须移除open类。
document.addEventListener("DOMContentLoaded", function() {
// 获取所有section元素
const sections = document.getElementsByTagName("section");
// 为每个section元素添加点击事件监听器
Array.from(sections).forEach(function(section) {
section.addEventListener('click', function(event) {
// 1. 获取除当前点击元素外的所有同级section元素
// document.getElementsByTagName 返回的是 HTMLCollection，它没有 filter 方法
// 需要先使用 Array.from() 将其转换为真正的数组
var otherSections = Array.from(sections).filter(element => element !== section);
// 2. 遍历其他元素，移除它们的 'open' 类
otherSections.forEach(function(otherEl) {
otherEl.classList.remove("open");
});
// 3. 切换当前点击元素的 'open' 类
section.classList.toggle("open");
});
});
});关键代码解析
document.getElementsByTagName("section"): 此方法返回一个HTMLCollection，它是一个类似数组的对象，包含了文档中所有指定标签名的元素。然而，HTMLCollection并不是一个真正的JavaScript数组，它缺少Array.prototype上的许多方法，例如filter()。
Array.from(sections): 这是解决上述问题的关键一步。Array.from()方法可以从一个类数组对象或可迭代对象创建一个新的、浅拷贝的Array实例。通过这一步，我们将HTMLCollection转换为了一个标准的JavaScript数组，从而可以使用filter()等数组方法。
.filter(element => element !== section): filter()方法创建一个新数组，其中包含所有通过所提供函数实现的测试的元素。在这里，我们筛选出所有不等于当前被点击的section元素的其他section元素。element !== section是一个简洁的箭头函数，用于判断元素是否为当前点击的元素。
otherSections.forEach(function(otherEl) { otherEl.classList.remove("open"); }): 遍历所有非当前点击的section元素，并使用classList.remove("open")方法确保它们移除了open类。classList是一个DOMTokenList接口，它提供了方便的方法来操作元素的类名列表。
section.classList.toggle("open"): 最后，对当前被点击的section元素使用classList.toggle("open")。这个方法会在元素存在open类时移除它，不存在时添加它，从而实现类名的切换效果。
注意事项与优化
- 唯一ID问题: 如前所述，id属性在HTML中必须是唯一的。在实际项目中，应确保每个id都是独一无二的，或者使用类名来标识一组元素。
- 事件委托: 对于包含大量子元素的父容器，为每个子元素单独添加事件监听器可能会影响性能。在这种情况下，可以考虑使用事件委托，即在父元素上添加一个事件监听器，然后根据event.target来判断是哪个子元素被点击。
- 可维护性: 对于更复杂的交互，可以将逻辑封装到函数中，或者考虑使用数据属性（data-*）来存储状态或标识，使HTML和JavaScript之间的耦合度更低。
- CSS过渡: 示例中的transition: all 300ms ease-in-out;确保了背景色变化时有平滑的过渡效果，提升了用户体验。
总结
通过本教程，我们学习了如何利用Array.from()、filter()和classList API在JavaScript中实现一个高效且易于维护的独占式类名切换功能。这种模式在构建各种交互式Web界面时非常有用，能够确保UI状态的清晰和一致性。掌握这些基础但强大的DOM操作技巧，将有助于您构建更具动态性和响应性的Web应用。
