Javascript 如何设置初始加载的默认选项卡

当前打开到“免费赠品和附加品”选项卡。我希望它打开到第一个选项卡“联邦和委员会”。我相信，默认情况下，它将打开到第一个选项卡。我试图找到它告诉浏览器在第三个选项卡上打开它的位置，但找不到它。

我想这就是您要查找的代码：

$('div#Panels').tabs({
    active: 2,

该选项告诉选项卡控件要显示哪个选项卡

如果将

active

值更改为

0

（或将其全部删除），则页面加载时应显示第一个选项卡

---

由于初始显示的选项卡不会触发

activate

事件，因此可以将

activate

事件处理程序中的代码移动到单独的函数中，然后在

activate

事件处理程序中以及页面首次加载时调用该函数

<script>
$(document).ready(function() {
    function activateTab(index) {
        switch (index) {
            case 0:

                $('#carousel').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: true,
                    slideshow: false,
                    itemWidth: 80,
                    itemMargin: 5,
                    asNavFor: '#slider'
                });

                $('#slider').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: true,
                    slideshow: false,
                    sync: "#carousel"
                });

                //-----------------
                $(window).resize();
                //-----------------

                break;

            case 1:

                $('#carousel2').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: true,
                    slideshow: false,
                    itemWidth: 80,
                    itemMargin: 5,
                    asNavFor: '#slider2'
                });

                $('#slider2').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: true,
                    slideshow: false,
                    sync: "#carousel2"
                });

                //-----------------
                $(window).resize();
                //-----------------

            break;   
          }
    }

    $('div#Panels').tabs({
        active: 0,
        collapsible: false,
        activate: function(event, ui) {
            activateTab(ui.newPanel.index());
        }
    });

    activateTab(0);
});
</script>

$（文档）.ready（函数（）{
功能激活选项卡（索引）{
开关（索引）{
案例0：
$（'旋转木马'）.flexslider({
动画：“幻灯片”，
控制导航：错误，
animationLoop:true，
幻灯片放映：错误，
项目宽度：80，
项目保证金：5，
asNavFor:“#滑块”
});
$（“#滑块”）.flexslider({
动画：“幻灯片”，
控制导航：错误，
animationLoop:true，
幻灯片放映：错误，
同步：“旋转木马”
});
//-----------------
$（窗口）.resize（）；
//-----------------
打破
案例1：
$（'#carousel2'）。flexslider({
动画：“幻灯片”，
控制导航：错误，
animationLoop:true，
幻灯片放映：错误，
项目宽度：80，
项目保证金：5，
asNavFor:“#滑块2”
});
$（'#slider2'）。flexslider({
动画：“幻灯片”，
控制导航：错误，
animationLoop:true，
幻灯片放映：错误，
同步：“旋转木马2”
});
//-----------------
$（窗口）.resize（）；
//-----------------
打破
}
}
$（'div#Panels'）。选项卡({
活动：0，
可折叠：错误，
激活：功能（事件、用户界面）{
activateTab（ui.newPanel.index（））；
}
});
活化塔B（0）；
});

您需要在代码中将活动设置为0

$(document).ready(function() {
    $('div#Panels').tabs({
    active: 2,
    collapsible: false,
    activate: function(event, ui) {...

---

更新

单击选项卡0时，页面将运行以下代码：

$('#carousel').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: true,
   slideshow: false,
   itemWidth: 80,
   itemMargin: 5,
   asNavFor: '#slider'
});

$('#slider').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: true,
   slideshow: false,
   sync: "#carousel"
});

//-----------------
$(window).resize();
//-----------------

由于您没有单击此选项卡开始，因此当选项卡打开时，此代码没有运行。您需要自己运行代码。我建议创建一个函数，并在定义选项卡后立即调用它

完整的脚本可能是（可能有些地方放错了，因为我没有运行它）：

---

非常感谢。这可以使用第一个选项卡打开，但是现在，除非我从该选项卡中单击并单击返回，否则该选项卡中包含的flexslider将不会加载。你知道怎么修吗？谢谢。这可以使用第一个选项卡打开，但是现在，除非我从该选项卡中单击并单击返回，否则该选项卡中包含的flexslider将不会加载。你知道如何修复吗？@expansiverove-很遗憾它没有自动执行代码，但它可以修复。我已经补充了我的答案，谢谢你。该脚本对于选项卡0非常有效，但当单击选项卡时，选项卡1中的第二个flexslider不会加载。Nizam也回答了这个问题，他创建了一个函数ClickedTab，在定义了选项卡之后调用，它似乎工作得很好。@Expansiverove-很高兴听到你能工作。我看到我显示的代码有错误。应该是

ui.newPanel.index（）

，而不是

ui.newPanel.index

。

function ClickedTab(carousel, slider){
   $(carousel).flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: true,
      slideshow: false,
      itemWidth: 80,
      itemMargin: 5,
      asNavFor: slider
   });

   $(slider).flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: true,
      slideshow: false,
      sync: carousel
   });

   //-----------------
   $(window).resize();
   //-----------------
}

$(document).ready(function() {
    $('div#Panels').tabs({
        active: 0,
        collapsible: false,
        activate: function(event, ui) {
          switch (ui.newPanel.index()) {
           case 0:
              ClickedTab("#carousel", "#slider"); break;
           case 1:
              ClickedTab("#carousel2","#slider2"); break;
          }
        }
    });
    ClickedTab("#carousel", "#slider")
})