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

 Only letters please 
 Only letters please 2
Sub

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代码整合，即可得到一个完整的可运行示例。

    
    
    
    



     Only letters please 
     Only letters please 2
    切换文本
    


    

注意事项与总结

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

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