jQuery Mobile 默认选项卡

Question

我想在 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 });

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

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

No background color demo

Answer 1

要设置活动标签，请尝试：

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

这是一个有效的DEMO

更新：选项卡按钮上的蓝色背景来自 ui-btn-active 类。将此类添加到按钮中，或者不设置活动选项卡，而是触发相应按钮上的单击事件：http://jsfiddle.net/ezanker/c29gd4h6/1/

Answer 2

我在第一个 tab-li 中添加了 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 -->

如果不起作用，请在下面尝试它仅在页面加载时对我有用我的意思是在浏览器中刷新页面

将以下代码放入 jquerymobile pagecreate 事件中，这将使每个第一个选项卡都被选中

$('[data-role="tabs"] a:first').each(function() {
      $(this).click();
    });

我已将以上几行放入 pagecreate 事件中

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

在上面的行中，#homepage 是我的页面 ID，pagecreate 是页面 load/init 时触发的 jquery-mobile 事件

Answer 3

HTML

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

JS

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

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

Answer 4

我发现现有提到的解决方案存在问题：

• @ezanker 的那个显示了内容，但没有将标签按钮设置为活动状态
• @Devendra Chhaiya 的那个也单击了选项卡内容包含的任何第一个链接！ :-)
• 我还发现返回该页面时选项卡没有保持选中状态，因此我也使用了this solution 来解决此问题。
• 页面加载到标签内容时也存在问题，所以我不得不fix that too
• 此外（是的，还有更多 :-) 我想根据特定页面的要求选择一个 特定 选项卡，因此我在从服务器生成页面时添加了一个类 select-this-tab .

所以我修改了@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 行，您可以使用这些行来证明代码确实触发了。