Monaca Onsen UI Discord Chat Github Repo

Ons-tabbar with ons-navigator active Tab Problems

  • Hi letzs assume i have a tabbar as some kind of navigation:

            <ons-tab page="navigator.html icon="fa-home">
            <ons-tab  icon="fa-search" >
            <ons-tab icon="fa-user-md" >
            <ons-tab icon="fa-qrcode">
       <template id="navigator.html">
            <ons-navigator id="myNavigator" page="firstTab.html"></ons-navigator>

    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.

  • administrators

    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;