<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <meta charset="utf-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> <ons-page> <ons-toolbar> <ons-toolbar-button> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> <div class="center">Home</div> </ons-toolbar> <ons-tabbar position="auto"> <ons-tab page="tab1.html" label="Home" icon="ion-home, material:md-home" badge="7" active> </ons-tab> <ons-tab page="tab2.html" label="User" icon="md-account" active-icon="md-account"> </ons-tab> <ons-tab page="tab3.html" label="Cart" icon="fa-opencart" active-icon="fa-opencart"> </ons-tab> <ons-tab page="tab4.html" label="Wish List" icon="fa-heart" active-icon="fa-heart"> </ons-tab> </ons-tabbar> </ons-page> <template id="tab1.html"> <ons-page id="Home"> <p style="text-align: center;"> This is the Home page. </p> </ons-page> </template> <template id="tab2.html"> <ons-page id="User"> <p style="text-align: center;"> This is the Account page. </p> </ons-page> </template> <template id="tab3.html"> <ons-page id="Cart"> <p style="text-align: center;"> This is Cart. </p> </ons-page> </template> <template id="tab4.html"> <ons-page id="WishList"> <p style="text-align: center;"> This is Wish List. </p> </ons-page> </template>

document.addEventListener('postchange', function(event) { document.querySelector('ons-toolbar .center') .innerHTML = event.tabItem.getAttribute('label'); });