ons-tabbarを解除したい

ons-tabbarで表示しているコンテンツを、ons-tabbarの無いコンテンツ画面に切り替えることはできるのでしょうか？

■実装イメージ
以下のような動作を実現したいのです。
0. ログイン画面（ons-tabbarの無い画面）
0. ログイン後画面（ons-tabbarでコンテンツを出し分け）
0. ログアウトしたら、ons-tabbarの無いログイン画面に戻りたい

■Monacaの実装状況
以下のようなHTMLで画面を作成しています。
※説明およびHTMLの簡素化のため、ログインフォームは作成していません。[ons-tab画面へ]ボタンを押したら、ons-tabbarで作成された画面に行くようにしています。

＜HTMLの作成手順＞
0. MonacaクラウドIDEで[新しいプロジェクトを作る]を選択
0. IDEテンプレートの種類で「フレームワークテンプレート」を選択
0. フレームワークで「JavaScript]を選択
0. テンプレートで「Onsen UI V2 Minimum」を選択してプロジェクトを作成
0. index.htmlを以下のように作成する

nav1.htmlでons-buttonを押したら、ons-tabbarを解除して、top.htmlに戻りたいのですが、そのようなことは可能でしょうか？

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
</head>
<body>

<ons-navigator id="nav" page="top.html"></ons-navigator>

<template id="top.html">
  <ons-page>
	  <ons-button onclick="nav.pushPage('tab_page.html');">ons-tab画面へ</ons-button>
  </ons-page>
</template>

<template id="tab_page.html">
	<ons-tabbar position="bottom">
		<ons-tab page="navigator1.html" label="ホーム" icon="fa-home" active="true"></ons-tab>
		<ons-tab page="navigator2.html" label="記録する" icon="fa-camera-retro"></ons-tab>
	</ons-tabbar>
</template>

<template id="navigator1.html">
	<ons-page>
		<ons-navigator id="nav1" page="nav1.html"></ons-navigator>
	</ons-page>
</template>

<template id="navigator2.html">
	<ons-page>
		<ons-navigator id="nav2" page="nav2.html"></ons-navigator>
	</ons-page>
</template>

<template id="nav1.html">
	<ons-page>
		<ons-button onclick="XXX.XXXXX('top.html');">ons-tabbarを解除してtop.htmlへ</ons-button>
		<br>※方法が分からないため、onclickの関数はXXX.XXXXXとして仮置きしています。
	</ons-page>
</template>

<template id="nav2.html">
	<ons-page>
		nav2
	</ons-page>
</template>

</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<ons-button onclick="nav.pushPage('top.html');">ons-tabbarを解除してtop.htmlへ</ons-button>
2```と言う事ではなく？

投稿2021/05/05 04:26

yhasegawa55

総合スコア189

wallaby_66

2021/10/09 02:43

ありがとうございます。また、御礼が大変遅くなり、申し訳ございません。おっしゃる通りの方法で対応できました。同様の方法で試していたのですが、うまくいきませんでした。ご指摘を受けて、あらためて同様のコードをゼロから書き直したところ、うまくいきました。当方が書いたコードに何か問題があったのだと思います。大変助かりました。重ねてお礼申し上げます。

行動規範の内容に同意します