javascript - 如何在 css 页面加载时启用悬停选项卡？

Question

我正在研究 website我想在其中在页面加载时启用悬停。

我用于标签的 HTML 代码是:

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

我用来启用伦敦标签内容的 CSS 代码是:

.tab-contents>.active
{
display:block;
}

问题陈述:

我想知道我应该在 fiddle 中进行哪些更改这样在页面加载时伦敦选项卡总是悬停启用。内容部分已经启用，我现在只想通过悬停启用该选项卡。

Answer 1

将以下内容添加到您的脚本中:

var $activeTab = document.querySelector('.tablinks:first-child');
$activeTab.classList.toggle('active');