时间戳

首页 > 解决方案 > 根据一天中的日期和时间激活选项卡。JS 或 jQuery

javascript - 根据一天中的日期和时间激活选项卡。JS 或 jQuery

问题描述

我正在尝试在此页面上复制此功能。

https://womenimpacttech.com/wit-connect/event

我不确定要搜索什么或调用它来查找有关如何执行此操作的文档。

我在该页面上指的是第一个，当您打开页面时，顶部有标签，带有一周中的几天的标签。根据当天的情况，这是处于活动状态的选项卡。第二个是左边的议程。在它确定哪一天应该是活动的之后，它会根据一天中的时间，使等于当前时间的时间段处于活动状态。例如，如果是星期二，则星期二选项卡处于活动状态，如果是下午 2:00，则议程中包含下午 2:00 的选项卡处于活动状态。

只是寻找任何帮助/方向来开始它。

标签： javascriptjquery

解决方案

也许这对你有帮助。当然，您可以在我的示例中使用选项卡而不是 div，然后将类添加到此元素而不是“今天”，也许是“活动”。

var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

for(let i=1;i<=7;i++){
  let g=i;
  if(i==7) g=0;
  let d = new Date();
  let $button = $('#day1').clone();
  $button.css("display","inline-block");
  $button.html(days[g]);
  if(i==d.getDay()){
    $button.addClass("today"); 
  }
  
  $("#result").append($button);
}
body {
  background: white;
  color: #323232;
  font-weight: 300;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

img {
  width: 56px;
  height: 48px;
}

h1 {
  font-weight: 200;
  font-style: 26px;
  margin: 10px;
}

.day{
  border: 1px black solid;
  background-color:aliceblue;
  height: 30px;
  line-height: 30px;
  width: 60px;
  border-radius: 5px; 
  text-align: center;
  margin: 0px 2px 2px 0px;
}

.today{
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="day1" class="day" data-day=1 style="display:none"></div>
<div id="result">
</div>

推荐阅读