如何实现点击按钮后目标文本淡入显示的交互效果？

你的现有代码有几个小问题导致交互达不到预期，我帮你调整优化一下：

1. 目标文本容器.show-me初始没隐藏，页面一加载就会显示出来
2. 所有按钮共用同一逻辑，点其他按钮会把按钮文字改成"PowerApps"，这显然不是你想要的
3. 没做事件默认行为阻止（虽然这里影响不大，但加上更规范）

修正后的代码（单内容块场景） #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="show-details">
  <button class="btn btn-dark btnClick">PowerApps</button>
  <div class="show-me">
    <h4>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h4>
  </div>
  <button class="btn btn-dark btnClick">Operational Efficiency</button>
  <button class="btn btn-dark btnClick">Together</button>
</div>

CSS #

/* 初始隐藏目标文本块 */
.show-me {
  display: none;
  margin: 15px 0;
}

JavaScript #

$(".btnClick").click(function(event) {
  event.preventDefault();
  const $target = $(this).parent(".show-details").find('.show-me');
  
  // 点击PowerApps按钮显示内容，其他按钮点击隐藏内容
  if ($(this).text() === "PowerApps") {
    $target.fadeIn(500);
  } else {
    $target.fadeOut(500);
  }
});

扩展：多按钮对应不同内容的场景 #

如果你的需求是每个按钮点击后显示对应的专属文本，可以用下面的实现，逻辑更清晰：

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="show-details">
  <button class="btn btn-dark btnClick" data-target="powerapps-content">PowerApps</button>
  <button class="btn btn-dark btnClick" data-target="efficiency-content">Operational Efficiency</button>
  <button class="btn btn-dark btnClick" data-target="together-content">Together</button>
  
  <div class="show-me" id="powerapps-content">
    <h4>PowerApps专属内容：快速搭建企业级应用，无需复杂代码开发</h4>
  </div>
  <div class="show-me" id="efficiency-content">
    <h4>运营效率专属内容：优化业务流程，降低人力成本</h4>
  </div>
  <div class="show-me" id="together-content">
    <h4>Together专属内容：团队协作高效协同，打破信息壁垒</h4>
  </div>
</div>

CSS #

.show-me {
  display: none;
  margin: 15px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

JavaScript #

$(".btnClick").click(function(event) {
  event.preventDefault();
  // 通过data属性获取对应目标内容的ID
  const targetId = $(this).data('target');
  const $target = $('#' + targetId);
  
  // 先隐藏所有内容块，再淡入目标内容（避免多个内容同时显示）
  $('.show-me').fadeOut(300);
  setTimeout(() => {
    $target.fadeIn(500);
  }, 300);
});

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