“活動”選項不會更改所選標簽

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

選項卡的內容在切換，但是活動選項卡沒有在切換。 如何在不啟動click事件和盡可能利用jQuery Mobile / UI的情況下切換兩者？

Answer 1

您可以將addClass和removeClass用於$("#tab" + tabIndex)上的ui-btn-active類。 在遞增tabIndex之前使用removeClass在遞增之后使用addClass 。

這是jsfiddle 。

UPDATE

您可以使用switch語句在基於tabIndex的選項卡中顯示內容。 在tabIndex遞增之前隱藏所有選項卡內容，然后根據tabIndex顯示選項卡內容。

這是新的jsfiddle 。

更新2

感謝Omar ，您可以在tabsactivate事件上刪除並添加 ui-btn-class 。 我已經用Omar在評論中的內容更新了原始的小提琴。 這是最新的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 );