点击对应a元素仅显示单个div，其余隐藏的实现问题求助

你的问题出在：点击时只设置了目标div的显示状态，没有隐藏其他已经显示的div，同时代码存在大量重复逻辑。以下是优化后的解决方案：

修改思路 #

• 合并重复的函数逻辑，通过参数传递目标div类名和日期阈值，减少冗余代码
• 每次点击时先隐藏所有内容div，再根据日期条件显示目标div

完整代码 #

HTML

<div class="txtelem">
  <div class="dayone">1</div>
  <div class="daytwo">2</div>
  <div class="daythree">3</div>
</div>
<div class="boxelem">
  <a class="box1" onclick="openInfo('dayone', 1)">
    <img class="nb1" src="//placehold.co/50" />
  </a>
  <a class="box2" onclick="openInfo('daytwo', 2)">
    <img class="nb2" src="//placehold.co/51" />
  </a>
  <a class="box3" onclick="openInfo('daythree', 3)">
    <img class="nb3" src="//placehold.co/52" />
  </a>
</div>

CSS

.dayone,
.daytwo,
.daythree {
  display: none;
}

JavaScript

function openInfo(targetClass, dayThreshold) {
  // 隐藏所有内容div
  const allDays = document.querySelectorAll('.txtelem > div');
  allDays.forEach(dayDiv => {
    dayDiv.style.display = 'none';
  });

  // 判断日期条件并显示目标div
  const currentDay = new Date().getDate();
  if (currentDay > dayThreshold) {
    document.querySelector(`.${targetClass}`).style.display = 'flex';
  }
}

关键说明 #

1. 统一函数逻辑：用openInfo替代三个独立函数，通过参数区分不同的目标div和日期要求，避免重复代码
2. 先隐藏所有元素：点击时先遍历所有内容div，将它们的显示状态设为none，确保之前显示的内容被隐藏
3. 条件显示目标：仅当当前日期大于阈值时，才显示对应的目标div

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