如何声明,以便在 jquery 移动 UI 中突出显示默认选项卡

How do I declare so that the default tab will be highlighted in jquery mobile UI

本文关键字:UI 移动 显示 选项 默认 jquery 何声明 声明      更新时间:2023-09-26

我是jquery的新手。我正在使用jquery移动创建一个应用程序UI。

我从他们的移动标签条上的网站上获得了这个样本。如何声明,以便默认选项卡位于"到期贷款"下,并突出显示其选项卡。

<div data-role="tabs" id="tabs">
        <div data-role="navbar">
            <ul>
                <li id="loansDue"><a href="#one" data-ajax="false">Loans Due</a></li>
                <li id="overDue"><a href="#two" data-ajax="false">Overdue</a></li>
            </ul>
        </div>
        <div id="one" class="ui-body-d ui-content">
            <ul data-role="listview" data-inset="true">
                <li><a href="loanInfo.html">AY1415S2/109</a></li>
                <li><a href="loanInfo.html">AY1415S2/110</a></li>
            </ul>
        </div>
        <div id="two" class="ui-body-d ui-content">
            <ul data-role="listview" data-inset="true">
                <li><a href="loanInfo.html">AY1415S2/106</a></li>
                <li><a href="loanInfo.html">AY1415S2/107</a></li>
                <li><a href="loanInfo.html">AY1415S2/108</a></li>
                <li><a href="loanInfo.html">AY1415S2/109</a></li>
                <li><a href="loanInfo.html">AY1415S2/110</a></li>
            </ul>
        </div>
    </div>

我试过了

$('#tabs').tabs({ selected: 1 }); 

var SelectedTab = $('ul li#loansDue').index();
$( ".selector" ).tabs({ selected: SelectedTab  })

但它们都不起作用。请指教。

使用活动属性 - 其中"1"表示选项卡的索引

JSFiddle

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

我认为您必须执行以下操作,只需添加此脚本即可。

$(function(){
    $("#loansDue").addClass("ui-state-hover");
    $("#loansDue a").addClass("ui-btn-active");
});

这不是一种正确的方法,但我已经对其进行了测试,它工作正常。随意问任何事情。谢谢。

下面的代码应该选择索引为 1 的选项卡

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

创造了一个小提琴; http://jsfiddle.net/xdgcycud/