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

Question

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

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

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

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

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

Answer 1

嗨，我想你非常了解 jquery，有文档 https://www.w3schools.com/js/js_date_methods.asp 您可以使用日期功能来获取日期，年份，月份，甚至可以将工作日作为数字，只需仔细阅读， 之后，您可以编写算法以激活选项卡。快乐编码

Answer 2

您所指的网站似乎正在根据点击的"选项卡"更改正在呈现的数据。他们正在使用 React 来做到这一点，这样可以更容易地获得相同的功能(或像 Vue.js 这样的替代方案(，但你可以使用 jquery(或纯 javascript(获得相同的结果。

您需要做的第一件事是要呈现的数据。假设您的数据如下所示：

{
"days": [
{
"date": "2020-06-25",
"agendaItems": [
{
"start": "2020-06-25T17:00:00.000Z",
"end": "2020-06-25T17:45:00.000Z",
"type": "Keynote",
"title": "The title",
"description": "The description",
"videoUrl": "https://www.thevideos.com/thisvideo"
}
...
]
}
...
]
}

使用此数据，您可以遍历天数数组以呈现天数，还可以在每天添加一个 onclick 事件以根据其数据呈现其内容。可以使用相同的方法呈现选定日期的议程项目。

要呈现当前时间的今天议程项目，可以在呈现数据时执行此操作，方法是检查今天的日期和时间是否在任何议程项目的范围内。

Answer 3

也许这对你有帮助。当然，您可以使用制表符而不是我示例中的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>