如何用HTML、CSS和JavaScript实现多元素显隐（避免重复点击隐藏）

我想做一个类似Apple Mac Mini页面的模块（如下图），核心是4个按钮控制下方文本的显示/隐藏。

目前用以下代码实现时，再次点击同一按钮，对应文本会隐藏，这不符合预期。我是JavaScript新手，不知道怎么修正，求帮助。

当前代码 #

HTML

<button class="icon1">Button 1</button>
<button class="icon2">Button 2</button>
<button class="icon3">Button 3</button>
<button class="icon4">Button 4</button>

<p class="info info1">Toggle 1</p>
<p class="info info2">Toggle 2</p>
<p class="info info3">Toggle 3</p>
<p class="info info4">Toggle 4</p>
</div>

CSS

.info2, .info3, .info4 {
  grid-area: scrn;
  display: none;
}

/* decorative only */
body {
  font-size: 4vmin;
  text-align: center;
}
button {
  font-size: 2.5vmin;
}

JavaScript

$(function() {
    $('.icon1').click(function() {
        $('.info1').toggle();
        $('.info').not('.info1').hide();
    });                        
});
$(function() {
    $('.icon2').click(function() {
        $('.info2').toggle();
        $('.info').not('.info2').hide();
    });                        
});
$(function() {
    $('.icon3').click(function() {
        $('.info3').toggle();
        $('.info').not('.info3').hide();
    });                        
});
$(function() {
    $('.icon4').click(function() {
        $('.info4').toggle();
        $('.info').not('.info4').hide();
    });                        
});

解决方案 #

问题出在你用了toggle()方法——它会在显示/隐藏状态之间切换，所以重复点击同一按钮时，文本会从显示变回隐藏。我们需要改成点击按钮时强制显示对应文本，不会触发隐藏，同时简化代码结构：

优化后代码 #

HTML（给按钮加统一类和关联标识）

<button class="tab-btn icon1" data-target="info1">Button 1</button>
<button class="tab-btn icon2" data-target="info2">Button 2</button>
<button class="tab-btn icon3" data-target="info3">Button 3</button>
<button class="tab-btn icon4" data-target="info4">Button 4</button>

<p class="info info1">Toggle 1</p>
<p class="info info2">Toggle 2</p>
<p class="info info3">Toggle 3</p>
<p class="info info4">Toggle 4</p>

CSS（可选：添加选中按钮的样式）

.info2, .info3, .info4 {
  grid-area: scrn;
  display: none;
}

/* 可选：给当前选中的按钮加样式，提升交互体验 */
.tab-btn.active {
  background-color: #e0e0e0;
  border-color: #999;
}

/* decorative only */
body {
  font-size: 4vmin;
  text-align: center;
}
button {
  font-size: 2.5vmin;
}

JavaScript（统一事件处理，强制显示目标文本）

$(function() {
  // 给所有按钮绑定同一个点击事件
  $('.tab-btn').click(function() {
    // 获取当前按钮对应的文本类名
    const targetClass = $(this).data('target');
    
    // 先隐藏所有文本
    $('.info').hide();
    // 强制显示目标文本
    $('.' + targetClass).show();
    
    // 可选：更新按钮选中状态
    $('.tab-btn').removeClass('active');
    $(this).addClass('active');
  });
});

关键修改点 #

1. 移除toggle()，改用show()确保点击按钮时对应文本始终显示
2. 用统一的事件处理代替重复的4段代码，后续新增按钮只需复制现有结构即可
3. 可选的active类让用户能直观看到当前选中的按钮

内容的提问来源于stack exchange，提问作者Tyler Lally