Bootstrap v4.6 实现指定时段显示/隐藏指定nav-pills、其余nav-pills始终可见的JS代码合理性咨询

嘿，刚接触JS能写出这样的思路已经很棒啦！不过你的代码里有几个小问题，我帮你梳理并修正一下，让它能准确实现你的需求：

原代码的几个问题 #

• 变量未定义+时间判断逻辑错误：你写的date变量根本没声明，而且直接用15.30这种写法不对——JS里15.30是15.3（也就是15小时18分钟），不是15点30分。正确的做法是把当前时间转换成小时+分钟/60的数值，比如15:30就是15 + 30/60 = 15.5，17:15就是17 + 15/60 = 17.25。
• DOM元素访问错误：nav-pill是CSS类名，不能直接用nav-pill.show = true这种方式操作元素，得用DOM API获取对应的元素。
• 只执行一次，无法实时更新：当前代码只在页面加载时运行一次，时间过了之后不会自动切换显示状态，需要定时检查时间变化。
• 显示隐藏的方法不对：控制元素显示隐藏应该用style.display或者类名切换，而不是直接给元素赋值show属性。

修正后的完整实现 #

第一步：给需要控制的导航项加专属类

先给那两个需要按时段显示的nav-pill加一个额外的类（比如time-controlled），第三个不需要控制的保持原样：

<ul class="nav nav-pills">
  <!-- 这两个是需要时段控制的 -->
  <li class="nav-item time-controlled">
    <a class="nav-link" href="#">时段导航1</a>
  </li>
  <li class="nav-item time-controlled">
    <a class="nav-link" href="#">时段导航2</a>
  </li>
  <!-- 这个始终显示 -->
  <li class="nav-item">
    <a class="nav-link" href="#">永久导航</a>
  </li>
</ul>

第二步：修正后的JavaScript代码

function updateNavPillsVisibility() {
  const now = new Date();
  const currentHour = now.getHours();
  const currentMinute = now.getMinutes();
  // 把当前时间转换成小时+分钟/60的数值，方便比较
  const currentTime = currentHour + currentMinute / 60;
  
  // 定义目标时段：15:30（15.5）到17:15（17.25）
  const startTime = 15.5;
  const endTime = 17.25;
  
  // 获取所有需要控制的导航项
  const timeControlledPills = document.querySelectorAll('.time-controlled');
  
  // 遍历每个导航项，根据时间设置显示/隐藏
  timeControlledPills.forEach(pill => {
    if (currentTime >= startTime && currentTime < endTime) {
      pill.style.display = 'block'; // 显示
    } else {
      pill.style.display = 'none'; // 隐藏
    }
  });
}

// 页面加载时先执行一次
updateNavPillsVisibility();
// 每隔30秒检查一次时间，确保状态实时更新
setInterval(updateNavPillsVisibility, 30000);

额外说明 #

• 用setInterval每隔30秒检查一次是为了确保时间变化后导航状态能自动切换，你也可以改成1分钟（60000毫秒），根据需求调整。
• 如果你的nav-pill是用flex布局的，隐藏时用display: none可能会影响布局，也可以改用visibility: hidden或者添加一个自定义的隐藏类（比如.hidden { display: none; }），然后用pill.classList.toggle('hidden', currentTime < startTime || currentTime >= endTime)来切换类名，这样更符合CSS的最佳实践。

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