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-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.


  • 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;
    


  • @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