Question

我还在学习编码，而且我有一个非常简单/初学者类型的问题。

当我的页面加载选项卡容器中的所有选项卡都是灰色的。当您单击选项卡标题在CSS代码中的#tab-container ul.tab-menu img.active div设置上的选项卡时。当页面首次加载时，如何在第一个选项卡上显示该活动div设置而不必单击它？

这是一个小提琴：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）准备就绪时，绑定此代码以单击 x 元素上的事件。

一旦你明白自己在做什么，就可以轻松地做你想做的事。您只需要在页面加载时调用相同的函数，参数为tab1。

提示：$（“＃tab1”）。addClass（“active”）;

）

Answer 2

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

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

到

#tab-container ul.tab-menu .active

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

2 个答案: