CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Et Andrea
Et Andrea

Reputation: 273

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

I'm new to jquery. I'm creating an app UI with jquery mobile.

I got this sample from their web on mobile tabstrips. How do I declare so that the default tab will be under 'loans Due' and its tab will be highlighted.

<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>

I've tried 

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

and 

var SelectedTab = $('ul li#loansDue').index();

$( ".selector" ).tabs({ selected: SelectedTab  })

but none of them works. Please advise.

Upvotes: 1

Views: 297

Answers (3)

user1428716
user1428716

Reputation: 2136

Use active property - where "1" denotes the index of the tab

JSFiddle

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

Upvotes: 2

Vatsal Padhiyar
Vatsal Padhiyar

Reputation: 146

I think you have to do as below just add this script.

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

This is not a proper way but I have tested it and its just working fine. Feel free to ask anything. Thanks.

Upvotes: 1

dr_dev
dr_dev

Reputation: 522

The below code should select the tab with index 1

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

Created a fiddle; http://jsfiddle.net/xdgcycud/

Upvotes: 0

Related Questions