基于data-showme属性实现按钮点击切换图片及内容显隐的开发需求

核心实现思路 #

通过按钮的data-showme属性绑定对应内容区块的ID，配合CSS初始显隐控制，再用JavaScript监听点击事件动态切换内容的显示状态，确保同一时刻仅展示当前按钮对应的内容。

HTML 结构 #

<!-- 切换按钮组 -->
<div class="toggle-buttons">
  <button class="toggle-btn active" data-showme="content-1">Button 1</button>
  <button class="toggle-btn" data-showme="content-2">Button 2</button>
  <button class="toggle-btn" data-showme="content-3">Button 3</button>
</div>

<!-- 内容展示区域 -->
<div class="content-container">
  <!-- 内容块1 -->
  <div id="content-1" class="content-block active">
    <h3>标题1</h3>
    <img src="your-image-1.jpg" alt="内容1图片">
    <ul class="icon-list">
      <li>图标项1-1</li>
      <li>图标项1-2</li>
      <li>图标项1-3</li>
    </ul>
  </div>
  
  <!-- 内容块2 -->
  <div id="content-2" class="content-block">
    <h3>标题2</h3>
    <img src="your-image-2.jpg" alt="内容2图片">
    <ul class="icon-list">
      <li>图标项2-1</li>
      <li>图标项2-2</li>
    </ul>
  </div>
  
  <!-- 内容块3 -->
  <div id="content-3" class="content-block">
    <h3>标题3</h3>
    <img src="your-image-3.jpg" alt="内容3图片">
    <ul class="icon-list">
      <li>图标项3-1</li>
      <li>图标项3-2</li>
      <li>图标项3-3</li>
      <li>图标项3-4</li>
    </ul>
  </div>
</div>

CSS 样式（初始显隐控制） #

/* 默认隐藏所有内容块 */
.content-block {
  display: none;
  margin-top: 20px;
}

/* 激活状态的内容块显示 */
.content-block.active {
  display: block;
}

/* 按钮样式优化（可选） */
.toggle-buttons {
  margin-bottom: 15px;
}

.toggle-btn {
  padding: 8px 16px;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

.toggle-btn.active {
  background-color: #2196F3;
  color: white;
  border-color: #2196F3;
}

JavaScript 逻辑（动态切换显隐） #

// 获取所有切换按钮和内容块
const toggleButtons = document.querySelectorAll('.toggle-btn');
const contentBlocks = document.querySelectorAll('.content-block');

// 遍历按钮绑定点击事件
toggleButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮的激活状态
    toggleButtons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加激活状态
    button.classList.add('active');
    
    // 获取要显示的内容块ID
    const targetContentId = button.getAttribute('data-showme');
    // 隐藏所有内容块
    contentBlocks.forEach(block => block.classList.remove('active'));
    // 显示目标内容块
    document.getElementById(targetContentId).classList.add('active');
  });
});

关键技术点说明 #

• Button Data Attribute：通过data-showme属性建立按钮与内容块的关联，无需硬编码对应关系，扩展性更强
• Initial Image Show/Hide CSS：利用CSS的display属性和active类控制初始状态和显示逻辑，避免页面加载时的内容闪烁
• Dynamic Image Hide/Show JS：通过监听点击事件统一管理按钮和内容块的激活状态，确保交互逻辑的一致性

内容的提问来源于stack exchange，提问作者Jaya Lakshmi