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

您可以在addClass上的removeClass课程中使用ui-btn-active和$("#tab" + tabIndex)。在递增后递增removeClass和tabIndex之前使用addClass。

这是jsfiddle。

<强>更新

您可以使用切换语句，根据tabIndex在标签中显示内容。在tabIndex递增之前隐藏所有标签内容，然后根据tabIndex展示标签内容隐藏。

这是新的jsfiddle。

更新2

感谢Omar，您可以删除并添加 ui-btn-class tabsactivate事件。我用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 );

＆＃34;有源＆＃34;选项不会更改选定的选项卡

2 个答案: