Calling Tabs inside a Tab? Jquerymobile

92 Views Asked by At

I just ran into a Problem. I have a page that has the Tabs widget embeded. The Tabs are working fine. But when I try linking a tab in one Tab the link won't work.

<div data-role="tabs">
  <div data-role="navbar">
<li><a href="#tab1">Link 1</a></li>
<li><a href="#tab2">Link 2</a></li>
<li><a href="#tab3">Link 3</a></li>
</div>
<div id="tab1">
  <div data-role="tabs">
  <div data-role="listview" data-inset="true">
  <li><a href="#tab1">Link 1</a></li>
  <li><a href="#tab2">Link 2</a></li>
  <li><a href="#tab3">Link 3</a></li>
  </div>
  </div>
  </div>
<div id="tab2">
 <p>Content</p>
  </div>
<div id="tab3">
 <p>Content</p>
  </div>
</div>
</div>

This is roughly my idea. The Tabs work but the Links inside the first tab don't. Is it possible to do this? For extra Reference:

http://demos.jquerymobile.com/1.4.5/tabs/

1

There are 1 best solutions below

0
Nick Müller On

So I did some research. According to my Javascript Console there is an Error which makes the links not work inside any of the Tabs. So then I had an Idea of a Workaround. Instead of Linking directly to the Tabs, I binded the Buttons to the Tab links like so:

<a OnClick="document.getElementById('#IdOfTab').click()">Link</a>

This works perfectly. It was as simple as calling the tab instead of trying to link to the page itself. I apologize for not being precise enough in my question.