如何在加载时激活此JavaScript选项卡？

Question

I'm still learning to code and I have a pretty easy/beginner type question.

When my page loads all tabs in the tab container are grey. When you click on a tab that tab header takes on the #tab-container ul.tab-menu img.active div settings in the CSS code. How can I make the first tab take on that active div setting when the page first loads without having to click on it?

Here's a fiddle: https://jsfiddle.net/gxswvmb0/1/

The code I tried per first comment:

$(document).ready(function(){
var activeTabIndex = -1;
var tabNames = ["tab1","tab2","tab3"];

$(".tab-menu > img").click(function(e){
    for(var i=0;i<tabNames.length;i++) {
        if(e.target.id == tabNames[i]) {
            activeTabIndex = i;
        } else {
            $("#"+tabNames[i]).removeClass("active");
            $("#"+tabNames[i]+"-tab").css("display", "none");
        }
    }
    $("#"+tabNames[activeTabIndex]+"-tab").fadeIn();
    $(#tab1).addClass("active");
    return false;
});

});

Answer 1

Try to solve the problem by understanding what you are doing. You are binding a function to and event on page load. ie when document (DOM) is ready, bind this code to click event on x element.

Once you understand what you are doing, its fairly easy to do what you want. You just need to call the same function on page load with argument as tab1.

hint: $("#tab1").addClass("active");

;)

Answer 2

It's hard to reproduce the page since all of your image assets are not available to me, but I did create a simple demo with what you have provided. Here: CodePen Demo
This should be easy to accomplish with CSS. I think you just need to change

#tab-container ul.tab-menu img.active

to

#tab-container ul.tab-menu .active