asked on

JQuery Tabs make first tab change to hover color on page load

I have some jQuery tabs - want to make the one that loads the active/hover color when page loads - I added a class to it called "active" but it isn't working

Here is a code pen https://codepen.io/rps-dev/pen/JjLqNJE

So when the page load the button on the right side called "Wining Watchlist" will be blue

Robert Granlund

You have added .active to the wrapper and not the button:
<div class="winning_watchlist-btn-wrap active">
<button class="winning_watchlist-btn"><a

it should be <button class="winning_watchlist-btn active"><

Member_2_7966984

ASKER

Thanks I tried that but that did not fix it - I saved the code pen with the edit you suggested

Robert Granlund

You also have to have .winning_watchlist-btn.active to make this work. The psuedo class :active is not enough.
.winning_watchlist-btn:hover,
.winning_watchlist-btn:focus,
.winning_watchlist-btn:active,
winning_watchlist-btn.active,
.winning_watchlist-btn a:focus { ... }

Member_2_7966984

ASKER

I saved the code pen again with the suggested CSS added and still not working
https://codepen.io/rps-dev/pen/JjLqNJE

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

Robert Granlund

See what Scott is saying? He is explaining it in much more detail than I.

Michel Plungjan

Drat. So that was why! the .active works

Here is one not setting the active using inline class, but using what I suggested

https://codepen.io/mplungjan/pen/ZEMxwXq

$(".tabs-list button").on("click", function () { ... }).eq(0).click();

Robert Granlund

@Michael, that works well.