Link to home
Start Free TrialLog in
Avatar of Member_2_7966984

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 

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

Avatar of Robert Granlund
Robert Granlund
Flag of United States of America image

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"><
Avatar of Member_2_7966984


Thanks I tried that but that did not fix it - I saved the code pen with the edit you suggested
You also have to have to make this work.  The psuedo class :active is not enough.
.winning_watchlist-btn a:focus { ... }
I saved the code pen again with the suggested CSS added and still not working 
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial

See what Scott is saying?  He is explaining it in much more detail than I.
Drat. So that was why! the .active works

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

$(".tabs-list button").on("click", function () { ... }).eq(0).click();
@Michael, that works well.