Ons-tabbar with ons-navigator active Tab Problems

SushiMan

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.

emccorson

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;

anibalcrain

@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