“活动”选项不会更改选定的选项卡

Question

我正在使用 jQuery mobile（不是 jQuery UI）。我想做的是在不触发点击的情况下更改活动选项卡。

HTML

<div data-role="page" id="settingsPage">
    <div data-role="content">
        <div data-role="tabs" id="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a id="tab0" href="#one" class="ui-btn-active">Tab One</a></li>
                    <li><a id="tab1" href="#two">Tab Two</a></li>
                    <li><a id="tab2" href="#three">Tab Three</a></li>
                </ul>
            </div>
            <div id="one" style="display: none" class="ui-body-d ui-content">Tab One content</div>
            <div id="two" style="display: none" class="ui-body-d ui-content">Tab Two content</div>
            <div id="three" style="display: none" class="ui-body-d ui-content">Tab Three content</div>
        </div>
    </div>

JS

var tabIndex = 0;

setInterval(function(){

  tabIndex++;
  if (tabIndex >= 3)
     tabIndex = 0;
  else if (tabIndex < 0)
     tabIndex = 2;

  $("#tabs").tabs( "option", "active", tabIndex );

}, 3000);

DEMO

发生的情况是选项卡内容正在切换，但活动选项卡没有。如何在不启动点击事件和尽可能利用 jQuery Mobile/UI 的情况下切换两者？

Answer 1

您可以在$("#tab" + tabIndex) 上使用addClass 和removeClass 作为ui-btn-active 类。在递增tabIndex 之前使用removeClass，在递增之后使用addClass。

这是jsfiddle。

更新

您可以使用 switch 语句，根据tabIndex 在选项卡中显示内容。在tabIndex 递增然后基于tabIndex 显示标签内容之前隐藏所有标签内容。

这是新的jsfiddle。

更新 2

感谢Omar，您可以在tabsactivate 事件中删除和添加 ui-btn-class。我已经用Omar has in the comments 更新了原始小提琴。这是最新的jsfiddle。

这是您需要添加到代码中的 tabsactivate 事件：

$("#tabs").on("tabsactivate", function(e, ui) {
  ui.oldTab.find("a").removeClass("ui-btn-active");
  ui.newTab.find("a").addClass("ui-btn-active").focus();
});

Answer 2

为什么不模拟点击呢？

$("#tab"+tabIndex).click();

而不是

$("#tabs").tabs( "option", "active", tabIndex );