Question

我想设置默认标签我的源代码

<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 });][1]

它的工作但没有背景颜色，因为它没有点击第一个标签我想在登录

时设置带背景的默认选项卡

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是jquery-mobile事件，当页面load/init

时会触发

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的那个按钮，以单击 only 实际标签中的 button （而不是任何标签内容，请保持标签处于选中状态，并防止内容加载进入选项卡区域。我必须将触发器从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行，这些行仅可用来证明代码确实触发了。

Jquery Mobile默认选项卡

4 个答案: