Hi,
I’m trying to add some routable tabs to my index page and a white page is always shown by default. This is my HTML:
<div class="view view-main view-init ios-edges" data-url="/">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title sliding">Test</div>
</div>
</div>
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="/" class="tab-link" data-route-tab-id="tab-1">1</a>
<a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">2 </a>
<a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">3</a>
</div>
</div>
<div class="tabs tabs-routable">
<div class="page-content tab" id="tab-1"></div>
<div class="page-content tab" id="tab-2"></div>
<div class="page-content tab" id="tab-3"></div>
</div>
</div>
</div>
And the routes:
{
path: '/',
url: './index.html',
tabs: [
{
path: '/',
id: 'tab-1',
content: '1-content',
},
{
path: '/tab-2/',
id: 'tab-2',
content: '2 content',
},
{
path: '/tab-3/',
id: 'tab-3',
content: '3 content',
},
],
},
The problem is that when I open “index.html”, the tabs are shown but without content, the content is only shown when I actually tap on one of the tabs. If I tap “Tab 1”, the route changes to “index.html#!/” and the content is shown, from there everything works perfectly.
How can I display the content of tab 1 without the need to change the route? As index.html is the default route for Cordova apps.
Thanks.