纯JavaScript实现元素显示与内容的优雅切换-js教程-PHP中文网

纯JavaScript实现元素显示与内容的优雅切换

DDD

发布： 2025-10-28 16:08:01

原创

235人浏览过

纯JavaScript实现<span>元素显示与内容的优雅切换元素显示与内容的优雅切换 " />

本文将指导您如何使用纯javascript和css类，高效且优雅地切换两个``元素的显示状态及其关联的文本内容。通过利用`classlist.toggle()`方法管理元素的可见性，我们能够避免直接操作`style.display`，从而实现代码的解耦，提高可维护性，并优化用户界面交互逻辑。

在前端开发中，动态切换页面元素的显示与隐藏是一种常见的需求。虽然直接修改元素的 style.display 属性可以实现这一目的，但这种做法往往会导致JavaScript代码与样式逻辑紧密耦合，使得代码难以维护和扩展。更推荐的做法是利用CSS类来管理元素的可见性，并通过JavaScript的 classList API来切换这些类，从而实现样式与行为的分离。

核心概念：利用CSS类控制显示状态

我们首先定义一个CSS类，用于隐藏元素。例如，可以创建一个名为 .hidden 的类，并将其 display 属性设置为 none。

.hidden {
  display: none; /* 隐藏元素 */
}

登录后复制

通过这种方式，我们只需在JavaScript中添加或移除这个 .hidden 类，即可控制元素的显示与隐藏，而无需直接操作 style.display。

JavaScript classList API

JavaScript提供了 Element.classList API，用于方便地操作元素的CSS类列表。其中，toggle() 和 contains() 是实现元素切换的关键方法。

立即学习“Java免费学习笔记（深入）”；

element.classList.toggle('className'): 如果元素包含 className，则移除它；如果元素不包含 className，则添加它。这是一个非常便捷的切换方法。
element.classList.contains('className'): 检查元素是否包含指定的 className。这对于判断当前状态非常有用。

实现步骤与代码示例

我们将通过一个具体的例子来演示如何切换两个 <span> 元素的显示状态，并根据当前显示的 <span> 来更新一个 <div> 的文本内容。

1. HTML 结构

首先，定义我们的HTML结构。我们有两个 <span> 元素，一个按钮用于触发切换，以及一个 <div> 用于显示当前激活 <span> 的文本。请注意，为了保持初始状态的清晰，我们可以在其中一个 <span> 上预设 hidden 类，使其在页面加载时处于隐藏状态。

YOYA优雅

多模态AI内容创作平台

106

查看详情

<span id="fcol" class="hidden" style="font-size:24px; color:green;"> Only letters please </span>
<span id="ferr" style="font-size:24px; color:red;"> Only letters please 2</span>
<button onClick="tog()">Sub</button>
<div id="pr"></div>

登录后复制

2. CSS 样式

除了上述的 .hidden 类，我们还可以添加一些基本的页面样式，如居中显示。

body {
  text-align: center;
  margin-top: 150px; /* 示例性调整，使内容在页面中部 */
}

.hidden {
  display: none; /* 隐藏元素 */
}

登录后复制

3. JavaScript 逻辑

现在，编写JavaScript函数来处理切换逻辑。

// 获取DOM元素的引用
const
  fc = document.getElementById("fcol"), // 第一个span元素
  fe = document.getElementById("ferr"), // 第二个span元素
  pr = document.getElementById("pr");   // 用于显示文本的div元素

/**
 * 切换两个span元素的显示状态并更新显示文本。
 */
function tog() {
  // 根据fe（第二个span）是否包含'hidden'类来判断当前哪个span是可见的
  // 如果fe是隐藏的，说明fc是可见的，此时点击后应显示fe的内容
  if (fe.classList.contains('hidden')) {
    pr.textContent = fe.textContent; // 更新pr的文本为fe的内容
  } else {
    // 如果fe是可见的，说明fc是隐藏的，此时点击后应显示fc的内容
    pr.textContent = fc.textContent; // 更新pr的文本为fc的内容
  }

  // 切换两个span元素的'hidden'类
  // 如果fc有'hidden'则移除，没有则添加；fe同理
  // 这样可以确保一个显示时另一个隐藏
  fc.classList.toggle('hidden');
  fe.classList.toggle('hidden');
}

// 页面加载时设置pr的初始文本，使其与当前显示的span内容一致
// 根据HTML中fe默认显示，所以初始文本为fe的内容
pr.textContent = fe.textContent;

登录后复制

完整示例

将上述HTML、CSS和JavaScript代码整合，即可得到一个完整的可运行示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯JavaScript切换Span文本</title>
    <style>
        body {
            text-align: center;
            margin-top: 150px;
            font-family: Arial, sans-serif;
        }

        .hidden {
            display: none; /* 隐藏元素 */
        }

        span {
            padding: 5px 10px;
            border: 1px solid #eee;
            margin: 5px;
            display: inline-block; /* 确保span可以设置外边距等 */
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            margin-top: 20px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
        }

        button:hover {
            background-color: #0056b3;
        }

        #pr {
            margin-top: 30px;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>

    <span id="fcol" class="hidden" style="font-size:24px; color:green;"> Only letters please </span>
    <span id="ferr" style="font-size:24px; color:red;"> Only letters please 2</span>
    <button onClick="tog()">切换文本</button>
    <div id="pr"></div>

    <script>
        const
          fc = document.getElementById("fcol"),
          fe = document.getElementById("ferr"),
          pr = document.getElementById("pr");

        function tog() {
          if (fe.classList.contains('hidden')) {
            pr.textContent = fe.textContent;
          } else {
            pr.textContent = fc.textContent;
          }

          fc.classList.toggle('hidden');
          fe.classList.toggle('hidden');
        }

        // 设置初始文本，与页面加载时可见的span内容一致
        pr.textContent = fe.textContent; 
    </script>

</body>
</html>

登录后复制

注意事项与总结

样式与行为分离： 通过CSS类管理显示状态，JavaScript只负责切换类名，实现了样式与行为的良好分离，代码更清晰，维护性更强。
classList.toggle() 的优势： toggle() 方法简化了条件判断和类名操作，避免了手动添加/移除类的繁琐逻辑。
初始状态： 确保HTML结构中的初始类名（如 class="hidden"）与JavaScript中设置的初始 pr.textContent 保持一致，以避免页面加载时的闪烁或不一致。
可扩展性： 这种方法易于扩展。如果未来需要添加更多显示状态（例如淡入淡出动画），只需修改 .hidden 类或添加新的CSS类，而无需改动JavaScript的核心逻辑。

通过采用 classList API 和 CSS 类来管理元素显示状态，我们不仅解决了动态切换 <span> 元素及其内容的问题，更重要的是，提升了代码的质量和可维护性，这在任何规模的项目中都是一个值得推崇的最佳实践。

以上就是纯JavaScript实现元素显示与内容的优雅切换的详细内容，更多请关注php中文网其它相关文章！