如何在css中启用页面加载时的悬停选项卡？答案

【问题标题】：How to enable hover tab on page load in css?如何在css中启用页面加载时的悬停选项卡？
【发布时间】：2023-03-02 22:33:01
【问题描述】：

我正在处理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>

我用来启用 London tab content 的 CSS 代码是：

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

问题陈述：

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

【问题讨论】：

为什么不在加载前将活动类添加到按钮？ <button class="tablinks active" onclick="openCity(event, 'London')">London</button>
@git-e-up 你能在小提琴中做出改变吗？这样一来，我就很容易形象化了。
jsfiddle.net/wpy496v3/9
@git-e-up 它解决了我一半的问题。在悬停Paris and Tokyo tabs 时，伦敦选项卡仍处于悬停状态。我想以 when page loads the london should have the background color which is present in the fiddle https://jsfiddle.net/wpy496v3/9/embedded/result which is changed by you but on hovering Paris` 和 Tokyo 标签的方式工作，伦敦标签悬停不应该出现。

标签： javascript jquery html css hover

【解决方案1】：

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

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

【讨论】：

你可以在现有的小提琴中进行更改吗？这样一来，我就很容易形象化了。