Ons-tabbar with ons-navigator active Tab Problems
-
Hi letzs assume i have a tabbar as some kind of navigation:
<ons-tabbar> <ons-tab page="navigator.html icon="fa-home"> </ons-tab> <ons-tab icon="fa-search" > </ons-tab> <ons-tab icon="fa-user-md" > </ons-tab> <ons-tab icon="fa-qrcode"> </ons-tab> </ons-tabbar> <template id="navigator.html"> <ons-navigator id="myNavigator" page="firstTab.html"></ons-navigator> </template>
I am able to switch the tabs pages with the navigator, but however, the “active tab” is not updated. The active Tab stays always at the first tab, only if i set some “page”-attribute to the tab, but this is not what i want.
I have some special case, that i only want ot navigate with a navigator and not with the tabs page-attribute. How can i update the “active tab” manually like if i only use "page=“xxxxx.html”?
THanks and sorry for my bad english.
-
Internally, each ons-tab has a radio input which is checked when the tab is active.
It’s a bit hacky, but you should just need to check the input and uncheck the currently active input for the active styling to work.
e.g. if fa-search is currently selected and you want to change tab to fa-user-md:
document.querySelector('ons-tab[icon="fa-search"] input').checked = false; document.querySelector('ons-tab[icon="fa-user-md"] input').checked = true;
-
@emccorson said in Ons-tabbar with ons-navigator active Tab Problems png to ico:
Internally, each ons-tab has a radio input which is checked when the tab is active.
It’s a bit hacky, but you should just need to check the input and uncheck the currently active input for the active styling to work.
e.g. if fa-search is currently selected and you want to change tab to fa-user-md:
document.querySelector('ons-tab[icon="fa-search"] input').checked = false; document.querySelector('ons-tab[icon="fa-user-md"] input').checked = true;
Thank you soooo much, that’s been bugging me for days x