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

Question

目前 this webpage 打开标签页，"Freebies & Extras." 我希望它打开第一个标签页，"Commonwealth & Council." 我相信，默认情况下，它会打开第一个标签页。我试图找到它告诉浏览器在第三个选项卡上打开它的位置，但找不到它。

Answer 1

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

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

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

如果您将 active 值更改为 0（或将其完全删除），它应该会在页面加载时显示第一个选项卡。

由于最初显示的选项卡未触发 activtate 事件，您可以将代码从 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>

Answer 2

您需要在代码中将active设置为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();
//-----------------

Since you are not clicking this tab to start, this code is not 运行ning when the tab opens.您需要自己运行代码。我建议创建一个函数并在定义选项卡后立即调用它。

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

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")
})

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

How to set default tab for initial load

javascript

jquery

jquery-tabs