如何使此 JavaScript 选项卡在加载时处于活动状态？

Question

我还在学习编码，我有一个漂亮的 easy/beginner 类型的问题。

当我的页面加载时，选项卡容器中的所有选项卡都是灰色的。当您单击一个选项卡时，该选项卡 header 将采用 CSS 代码中的 #tab-container ul.tab-menu img.active div 设置。如何在页面首次加载时使第一个选项卡采用活动 div 设置而无需单击它？

这里是 fiddle：https://jsfiddle.net/gxswvmb0/1/

我在第一条评论中尝试的代码：

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

尝试通过理解你在做什么来解决问题。您正在将函数绑定到页面加载时的事件。即当文档 (DOM) 准备就绪时，将 this 代码绑定到 x 元素上的单击事件。

一旦了解了自己在做什么，就很容易做自己想做的事。您只需要在页面加载时使用参数作为 tab1 调用相同的函数。

提示：$("#tab1").addClass("active");

;)

Answer 2

很难重现该页面，因为我无法使用您的所有图像资源，但我确实使用您提供的内容创建了一个简单的演示。这里：CodePen Demo
这应该很容易用 CSS 完成。我想你只需要改变

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

至

#tab-container ul.tab-menu .active

如何使此 JavaScript 选项卡在加载时处于活动状态？

How do I make this JavaScript tab active on load?

javascript

tabs