如何实现周节目单tab无手动选择时自动选中当前日期对应标签

你只需要在现有JS代码的末尾添加一段初始化逻辑，即可实现页面加载后自动选中当前星期对应的标签页，无需修改原有HTML、CSS和业务逻辑代码。

具体修改步骤 #

1. 找到现有JS代码的最末尾，添加如下代码：

// 页面加载完成后自动激活当前日期对应的tab
document.addEventListener('DOMContentLoaded', function() {
  // getDay()返回值规则：0=周日 1=周一 2=周二 3=周三 4=周四 5=周五 6=周六
  const dayFullNameMap = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  const today = new Date();
  const currentDayFullName = dayFullNameMap[today.getDay()];
  // 找到对应日期的tab按钮并触发点击
  const tabButtons = document.querySelectorAll('.tablinks');
  for (let btn of tabButtons) {
    if (btn.textContent.trim() === currentDayFullName) {
      btn.click();
      break;
    }
  }
});

2. 保存代码刷新页面即可生效，打开页面时会自动定位到当前星期对应的节目单。

逻辑说明 #

• 我们通过Date对象的getDay()方法获取当前星期的索引值，再通过映射表拿到对应的星期全称
• 遍历所有tab按钮，找到和当前星期全称匹配的按钮，主动触发点击事件，直接复用你已有的openDAY切换逻辑，不需要修改原有函数

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