Tab links break when page is init from a specific previous page

Questions
1

I am having a really strange issue…

I have a page with two tabs and everything works as expected. Various pages of my app navigate to this page and there are no issues. However, when navigating to this page from a specific other page in my app, the tab links break and the tabs cannot be changed.

Either clicking on the tab links:

<div class="toolbar tabbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
    </div
</div>

Or using the next button:

$$('.page-content').find('#next').on('click', function (e) { 
    app.tab.show('#tab-2');
})

Both do nothing after coming from a specific previous page. Weird! Any ideas?

2

Make sure tabs IDs (tab-1 and tab-2) are unique for this page? And this page is not loaded twice in DOM

1 Like
3

You’re right! The previous page had:

<p id="category"></p>

And one of the tab IDs on the tabbed page is also category so that was causing the issue.

Thanks!