CODEWITHSUNDEEP
javascriptcssjquery-mobiletabs
NoWar
NoWar

Reputation: 37633

How to set active TAB on pagecreate in jQuery Mobile

I need to select first TAB as default when page is created in jQuery Mobile.

Using official example is not clear how to do it. http://demos.jquerymobile.com/1.4.2/tabs/

Any clue?

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" 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>

Upvotes: 1

Views: 340

Answers (1)

Omar
Omar

Reputation: 527

Use Below Code // Add 'ui-btn-active' to which tab you want to set active

<link rel="stylesheet"    href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="tabs" id="tabs">
 <div data-role="navbar">
 <ul>
  <li><a href="#one" class="ui-btn-active" 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>

Upvotes: 1

Related Questions