Is it possible to move from the Onsen UI tab to the tab?

It's just like the title.I don't know if I can do it or not.
Thank you for your cooperation.

<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-iconion="ion-home"></ons-icon>
    <span style="font-size:14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html" active="true">
    <ons-iconion="ion-star">/ons-icon>
    <span style="font-size:14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-iconion="ion-gear-a">/ons-icon>
    <span style="font-size:14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  from here
</ons-template>

<ons-template id="fav.html">
  ...
</ons-template>

<ons-template id="settings.html">
  I want to move here.
</ons-template>

monaca onsen-ui

2022-09-30 20:12

2 Answers

<ons-tabbar> has a method setActiveTab() for switching tabs, so you should use it.
Try the snippet below.

 angular.module('app', ['onsen'])
.controller('PageController', function($scope){
  $scope.changeTab=function(index){
    $scope.tabbar.setActiveTab(index);
  };
});

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsen-css-components.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsenui.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/onsenui.min.js"></script>

<bodying-app="app">
  <ons-tabbar var="tabbar">
    <ons-tabicon="home" page="page1.html" active="true">/ons-tab>
    <ons-tabicon="user" page="page2.html">/ons-tab>
    <ons-tabicon="gear" page="page3.html">/ons-tab>
  </ons-tabbar>
  <ons-template id="page1.html">
    <ons-pageing-controller="PageController">
      <h1>page1</h1>
      <ons-buttoning-click="changeTab(0)">Tab1</ons-button>
      <ons-buttoning-click="changeTab(1)">Tab2</ons-button>
      <ons-buttoning-click="changeTab(2)">Tab3</ons-button>
    </ons-page>
  </ons-template>
  <ons-template id="page2.html">
    <ons-pageing-controller="PageController">
      <h1>page2</h1>
      <ons-buttoning-click="changeTab(0)">Tab1</ons-button>
      <ons-buttoning-click="changeTab(1)">Tab2</ons-button>
      <ons-buttoning-click="changeTab(2)">Tab3</ons-button>
    </ons-page>
  </ons-template>
  <ons-template id="page3.html">
    <ons-pageing-controller="PageController">
      <h1>page3</h1>
      <ons-buttoning-click="changeTab(0)">Tab1</ons-button>
      <ons-buttoning-click="changeTab(1)">Tab2</ons-button>
      <ons-buttoning-click="changeTab(2)">Tab3</ons-button>
    </ons-page>
  </ons-template>
</body>

2022-09-30 20:12

I think it can be used with the old OnsenUI.
As far as the questions are concerned, the tab numbers are from 0 to 2, so
$(".tab-bar__item:eq(2)").click();
I think you can move with eq as above.

As a bonus, you can check the currently selected tabs below.
ons-page controller initializes to find the tab number when moved.

// page controllers
module.controller('controller', function($scope){
	ons.ready(function(){
	    $scope.tab_changed=function($index,$tabitem){
	    	tab_scope.ActiveTabIndex=$index;
	    };
	});
});

<ons-tabbar var="tab_scope" on-active-tab-changed="tab_changed($index,$tabItem)">
	<ons-tab page="home.html" active="true">
		<ons-iconion="ion-home"></ons-icon>
		<span style="font-size:14px">Home</span>
	</ons-tab>
	<ons-tab page="fav.html" active="true">
		<ons-iconion="ion-star">/ons-icon>
		<span style="font-size:14px">Favorites</span>
	</ons-tab>
	<ons-tab page="settings.html" active="true">
		<ons-iconion="ion-gear-a">/ons-icon>
		<span style="font-size:14px">Settings</span>
	</ons-tab>
</ons-tabbar>

On the other hand, it has to be initialized before it can be used.
If you can't initialize, look at the class on the tab
You can force it out by searching for the class in the selected state

/**
 * return a tab number
 **/
function get_active_tab(){
    vartabno=-1;
    values = $(.tab-bar__item);
    for (key in elements) {
        if(0<=elements[key].className.indexOf("active")){tabno=key;break;}
    }
    return tabno;
}

2022-09-30 20:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656