Clash Royale CLAN TAG#URR8PPP

How to enable hover tab on page load in css?

I am working on a website in which I want to enable hover on page load.

The HTML code which I have used for the tabs are:

<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>


The CSS code which I have use in order to enable London tab content is:

.tab-contents>.active

display:block;



Problem Statement:

I am wondering what changes I should make in the fiddle so that on page load London tab is always enable with hover. The content section is already enabled, I just want to enable the tab now with hover.

<button class="tablinks active" onclick="openCity(event, 'London')">London</button>

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

Tokyo

1 Answer
1

Add the following to your script:

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.