 <script>
document.addEventListener('postchange', function (event) {
  console.log('postchange event', event);
});
function changeTab() {
  document.getElementById('tabbar').setActiveTab(1);
}
function changeButton() {
  document.getElementById('segment').setActiveButton(1);
}
function logIndexes() {
  console.log('active button index', document.getElementById('segment').getActiveButtonIndex());
  console.log('active tab index', document.getElementById('tabbar').getActiveTabIndex());
}
</script>

<ons-page class="page page--wrapper page-with-bottom-toolbar" shown=""><ons-toolbar class="toolbar"><div class="center toolbar__center toolbar__title">
     	TBITEM
    </div></ons-toolbar><div class="page__background"></div><div class="page__content" style="">


	  




<ons-tabbar id="tabbar" hide-tabs="" activeindex="0"><div class="tabbar__content ons-tabbar__content ons-swiper" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); bottom: 0px;"><div class="ons-swiper-target active" style="transform: translate3d(0px, 0px, 0px); transition: all 0.3s cubic-bezier(0.4, 0.7, 0.5, 1);"><ons-page class="page" shown=""><div class="page__background"></div><div class="page__content">
    <h2>1</h2>
    
	CONTENT

   </div></ons-page><ons-page class="page"><div class="page__background"></div><div class="page__content">
    <h2>2</h2>
    
	CONTENT

   </div></ons-page><ons-page class="page"><div class="page__background"></div><div class="page__content">
    <h2>3</h2>
    
	CONTENT

   </div></ons-page></div><div class="ons-swiper-blocker"></div></div><div class="tabbar ons-tabbar__footer ons-swiper-tabbar" style="display: none;">
    <ons-tab page="page1.html" class="tabbar__item active" active=""><input type="radio" style="display: none;"><button class="tabbar__button"></button></ons-tab>
    <ons-tab page="page2.html" class="tabbar__item"><input type="radio" style="display: none;"><button class="tabbar__button"></button></ons-tab>
    <ons-tab page="page3.html" class="tabbar__item"><input type="radio" style="display: none;"><button class="tabbar__button"></button></ons-tab>
<div class="tabbar__border" style="transition: all 0.3s cubic-bezier(0.4, 0.7, 0.5, 1); transform: translate3d(0%, 0px, 0px); display: none; width: 0px;"></div></div></ons-tabbar>

</div><ons-bottom-toolbar class="bottom-bar">

<center>

<ons-segment id="segment" tabbar-id="tabbar" style="width: 180px; padding: 8px;" class="segment">
        <button class="segment__item"><input class="segment__input" type="radio" value="0" name="ons-segment-gen-0"><div class="segment__button">Page 1</div></button>
        <button class="segment__item"><input class="segment__input" type="radio" value="1" name="ons-segment-gen-0"><div class="segment__button">Page 2</div></button>
        <button class="segment__item"><input class="segment__input" type="radio" value="2" name="ons-segment-gen-0"><div class="segment__button">Page 3</div></button>

</ons-segment>
 </center>
</ons-bottom-toolbar></ons-page>

<template id="page1.html">
  <ons-page>
    <h2>1</h2>
    
	CONTENT

   </ons-page>
</template>

<template id="page2.html">
  <ons-page>
    <h2>2</h2>
    
	CONTENT

   </ons-page>
</template>

<template id="page3.html">
  <ons-page>
    <h2>3</h2>
    
	CONTENT

   </ons-page>
</template>