我正在尝试复制此页面上的这个功能。
https://womenimpacttech.com/wit-connect/event
我不确定要搜索什么或者调用这个来查找关于如何这样做的文档。
我指的是第一页，当你打开页面时，顶部有标签，上面有一周中几天的标签。 根据当前日期的不同，这是处于活动状态的选项卡。 第二个是左边的议程。 在它确定哪一天是活动的之后，它然后根据一天中的时间，使等于当前时间的时隙活动。 例如，如果是星期二，那么星期二选项卡是活动的，然后如果是2:00PM，那么议程中包含2:00PM的选项卡是活动的。
只是在寻求任何帮助/方向来启动它。
嗨，我想你对jquery很了解有文档https://www.w3schools.com/js/js_date_methods.asp你可以用Date函数取日期，年，月，甚至你可以取星期作为数字只要仔细阅读，然后你就可以编写算法来制作活动标签。 快乐编码
你所提到的网站似乎正在根据点击的“选项卡”改变正在呈现的数据。 他们使用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事件以基于其数据呈现其内容。 可以使用相同的方法来呈现选定日期的议程项目。
对于呈现当前时间的今天议程项目，您可以在呈现数据时通过检查今天的日期和时间是否在任何议程项目的范围内来执行此操作。
也许这对你有帮助。 当然，在我的示例中，您可以使用选项卡而不是div，然后向这个元素添加class，而不是“today”（今天），也可以使用“active”（活动）。
null
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>