咨询：点击humidity按钮切换温湿度显示区域的实现方法

可以通过HTML结构配合JavaScript的DOM操作来实现这个需求，核心思路是准备两个独立的区域容器，分别对应温度和湿度指示器，通过按钮控制这两个容器的显示与隐藏状态。

1. HTML结构 #

先搭建基础页面结构，包含切换按钮和两个指示器区域：

<div class="sensor-container">
  <!-- 切换按钮组 -->
  <div class="btn-group">
    <button id="temp-btn">temperature</button>
    <button id="hum-btn">humidity</button>
  </div>

  <!-- 温度指示器区域 -->
  <div id="temp-area" class="sensor-area active">
    <div class="indicator">温度指示器：25℃</div>
  </div>

  <!-- 湿度指示器区域 -->
  <div id="hum-area" class="sensor-area">
    <div class="indicator">湿度指示器：60%</div>
  </div>
</div>

2. CSS样式 #

给区域添加基础样式，默认只显示激活状态的区域：

.sensor-container {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.btn-group button {
  padding: 8px 16px;
  margin-right: 8px;
  cursor: pointer;
}

.sensor-area {
  margin-top: 15px;
  display: none; /* 默认隐藏所有区域 */
}

.sensor-area.active {
  display: block; /* 激活状态的区域显示 */
}

.indicator {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

3. JavaScript逻辑 #

给按钮绑定点击事件，切换对应区域的显示状态：

// 获取元素
const tempBtn = document.getElementById('temp-btn');
const humBtn = document.getElementById('hum-btn');
const tempArea = document.getElementById('temp-area');
const humArea = document.getElementById('hum-area');

// 湿度按钮点击事件
humBtn.addEventListener('click', () => {
  tempArea.classList.remove('active');
  humArea.classList.add('active');
});

// 温度按钮点击事件（可选，用于切回温度显示）
tempBtn.addEventListener('click', () => {
  humArea.classList.remove('active');
  tempArea.classList.add('active');
});

逻辑说明 #

• 初始状态下给温度区域添加active类，让它默认显示；
• 点击humidity按钮时，移除温度区域的active类，给湿度区域添加active类，实现区域切换；
• 可选添加温度按钮的切换逻辑，方便切回温度显示。

内容的提问来源于stack exchange，提问作者Fidger Gang