如何实现按周循环切换隐藏/显示午餐菜单链接功能

实现方案 #

步骤1：修正现有HTML笔误 #

原代码中第4个菜单的data-id属性值错误，修改为4保证序号对应：

<div class="wrapper">
  <a href="#" class="collection-item item-menu" data-id="1">Lunch Menu (Week #1)</a>
  <a href="#" class="collection-item item-menu" data-id="2">Lunch Menu (Week #2)</a>
  <a href="#" class="collection-item item-menu" data-id="3">Lunch Menu (Week #3)</a>
  <a href="#" class="collection-item item-menu" data-id="4">Lunch Menu (Week #4)</a>
</div>

步骤2：添加基础CSS #

默认隐藏所有菜单，避免页面加载时出现内容闪烁：

.item-menu {
  display: none;
}
.item-menu.active {
  /* 展示样式可根据原有布局调整为block/inline等 */
  display: inline-block;
}

步骤3：添加JS逻辑实现周度自动轮换 #

// 计算当前属于4周循环中的第几周，返回值为1-4
function getCurrentWeekIndex() {
  const now = new Date();
  // 适配周计算规则：JS默认getDay()返回0为周日，1为周一，6为周六
  const dayOfWeek = now.getDay();
  // 计算当前日期到当周周一的天数偏移
  const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
  const currentMonday = new Date(now.setDate(now.getDate() + mondayOffset));
  // 基准周：可自定义任意过去的周一作为计算起点，此处用2024年1月1日（周一）作为基准
  const baseMonday = new Date(2024, 0, 1);
  // 计算从基准周到当前周的总周数
  const diffTime = currentMonday.getTime() - baseMonday.getTime();
  const diffWeeks = Math.floor(diffTime / (1000 * 60 * 60 * 24 * 7));
  // 模4计算循环序号，余数为0时对应第4周
  const weekIndex = diffWeeks % 4;
  return weekIndex === 0 ? 4 : weekIndex;
}

// 页面加载完成后渲染对应周的菜单
document.addEventListener('DOMContentLoaded', function() {
  const currentWeek = getCurrentWeekIndex();
  const targetMenu = document.querySelector(`.item-menu[data-id="${currentWeek}"]`);
  targetMenu && targetMenu.classList.add('active');
});

内容的提问来源于stack exchange，提问作者Muhammad Talha Amjad