Jquery mobile jQuery移动默认选项卡

我想在jQuery Mobile中设置一个默认选项卡

我的源代码：

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" id="tabId1" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content.html" data-ajax="false">three</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>
  </div>
</div>

$("#tabs").tabs({ active: 0 });

它工作了，但没有背景色，因为第一个选项卡实际上没有被单击

我想在登录时设置带有背景的默认选项卡

---

要设置活动选项卡，请尝试：

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

这是一张工作票

---

更新：选项卡按钮上的蓝色背景来自类ui btn活动。将此类添加到按钮中，或者不设置活动选项卡，而是在相应按钮上触发单击事件：

我已在第一个选项卡中添加了class=ui btn active

<div data-role="navbar">
    <ul>
        <li><a href="a.html" class="ui-btn-active">One</a></li>
        <li><a href="b.html">Two</a></li>
    </ul>
</div><!-- /navbar -->

我已经在pagecreate事件中输入了上述行

$(document).on("pagecreate", "#homepage", function(event) {        
    $('[data-role="tabs"] a:first').each(function() {
      $(this).click();
    });
 });

在上面的行中，homepage是我的页面id，pagecreate是jquery mobile的事件，它在页面HTML时触发

---

我发现上述现有解决方案存在以下问题：

@ezanker的一个显示了内容，但没有将选项卡按钮设置为活动状态 @Devendra Chhaiya点击了选项卡内容包含的任何第一个链接！：- 我还发现，当返回到该页面时，该选项卡没有保持选中状态，所以我过去也解决了这个问题。 还有一个问题，页面加载到标签内容，所以我不得不 此外，是的，还有更多：-我想根据特定页面的要求选择一个特定选项卡，因此我添加了一个类，在从服务器生成页面时选择此选项卡。 因此，我修改了@Devendra Chhaiya的一个，只单击实际的选项卡按钮，而不单击任何选项卡内容，保持选项卡处于选中状态，并防止内容加载到选项卡区域。我必须将触发器从pagecreate移动到pageinit才能工作：

/*
 * https://stackoverflow.com/questions/13837304/jquery-ui-non-ajax-tab-loading-whole-website-into-itself/17384908#17384908
 */
jQuery(function () {
    jQuery('base').remove();
    jQuery("#tabs").tabs();
});

$(document).on('pageinit', function () {

    console.log('pageinit');

    /*
    * Ensure the correct tab of a set is selected (and only once)
    * https://stackoverflow.com/questions/25336233/jquery-mobile-default-tab/64080164#64080164
    */
    $('[data-role="tabs"] [data-role="navbar"] ul li.select-this-tab').each(function () {
        console.log('Clicking tab');
        $(this).removeClass("select-this-tab").find("a").click();
    });

    /*
     * Ensure a tab REMAINS selected when coming back to that page.
     * https://stackoverflow.com/questions/16752704/tab-active-state-in-jquery-mobile/23725612#23725612
     */
    $('div[data-role="tabs"] [data-role="navbar"] a').click(function (e) {
        e.preventDefault();
        $('div[data-role="tabs"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
        $(this).addClass('ui-btn-active ui-state-persist');
    });

---

您可以删除console.log行，您可以使用它来证明代码实际触发。

我知道它是选项卡2上的默认值，但没有蓝色背景，如果您单击任何选项卡，您将看到我想要设置默认选项卡，并使用背景色，就像您单击选项卡一样。您可以触发单击按钮：或添加ui btn活动类：

 <div data-role="tabs" id="tabs">
        <div data-role="navbar">
            <ul>
                <li><a href="#one" id="tab-one" data-ajax="false">Default</a></li>

 $(document).on("pagecreate", function (event) {

            $('#tab-one').trigger('click');
        });

/*
 * https://stackoverflow.com/questions/13837304/jquery-ui-non-ajax-tab-loading-whole-website-into-itself/17384908#17384908
 */
jQuery(function () {
    jQuery('base').remove();
    jQuery("#tabs").tabs();
});

$(document).on('pageinit', function () {

    console.log('pageinit');

    /*
    * Ensure the correct tab of a set is selected (and only once)
    * https://stackoverflow.com/questions/25336233/jquery-mobile-default-tab/64080164#64080164
    */
    $('[data-role="tabs"] [data-role="navbar"] ul li.select-this-tab').each(function () {
        console.log('Clicking tab');
        $(this).removeClass("select-this-tab").find("a").click();
    });

    /*
     * Ensure a tab REMAINS selected when coming back to that page.
     * https://stackoverflow.com/questions/16752704/tab-active-state-in-jquery-mobile/23725612#23725612
     */
    $('div[data-role="tabs"] [data-role="navbar"] a').click(function (e) {
        e.preventDefault();
        $('div[data-role="tabs"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
        $(this).addClass('ui-btn-active ui-state-persist');
    });