CODEWITHSUNDEEP
jqueryjquery-mobile
Thomas
Thomas

Reputation: 385

How to link to specific tab page in JQuery mobile?

I have a set of tabs on a page in JQuery mobile. On a separate page, I would like to create links that specify which tab window to display.

Currently, it seems like linking to a tab's ID does not do anything unless it is on the same page. (The tab headers work just fine.) They just do not work from a separate 'page'. I am not sure if this is an oversight in the framework, or if I am missing something simple!

Fiddle.

<body>

<div data-role="page" id="front">

  <div data-role="content" class="ui-content">
    <a href="#main">main link</a>
    <a href="#p1">tab 1</a>
    <a href="#p2">tab 2</a>

  </div>

</div>

<div data-role="page" id="main">

  <div data-role="tabs" class="tabs ui-content">
    <div data-role="navbar">
      <ul>
        <li><a href="#p1" data-ajax="false">Tab 1</a></li>
        <li><a href="#p2" data-ajax="false">Tab 2</a></li>
      </ul>
    </div>
    <div id="p1" class="ui-body-d ui-content">
      Tab 1 <br />
      <a href="#front">Return</a>

    </div>
    <div id="p2" class="ui-body-d ui-content">
      Tab 2 <br />
      <a href="#front">Return</a>

    </div>
  </div>

</div>

</body>

Upvotes: 2

Views: 244

Answers (1)

RBoschini
RBoschini

Reputation: 506

I do a example to you, see this in jsFiddler.

I have bind links with special tags, to detect and trigger click.

$(document).ready(function(){
    $('a[data-target]').on('click',function(){
    var target = $(this).attr('data-target');
    $('a[data-info="'+ target +'"]').click();
  });
});

But, this method have a problem, the time of .click() is quickly than render tab, then i resolve that with a little timer.

setTimeout(function(){
    $('a[data-info="'+ target +'"]').click();
},500)

let me know with works.

Sorry for my bad english.

Upvotes: 1

Related Questions