###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
###発生している問題・エラーメッセージ
onsenUI v2 の初心者です。 monacaにてOnsenUI V2 Tabbarを使用しコンテンツを作成中です。
「Onsen UI V2 JS tabbar」テンプレートを使って、プロジェクトを作成後、以下に修正します。「Page4へ」ボタンを押しても遷移しない。原因はどこでしょうか?
エラーメッセージ
エラーメッセージなし、 現象として、遷移しないだけ
###該当のソースコード
ここにご自身が実行したソースコードを書いてください
index.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"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; 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!"); }); </script> </head> <body> <ons-navigator var="myNavigator" page="tab.html"> </ons-navigator> </body> </html>tab.html
<!-- タブバーの表示 --> <ons-tabbar> <ons-tab page="page1.html" label="Page 1" icon="fa-align-justify" active="true"></ons-tab> <ons-tab page="page2.html" label="Page 2" icon="fa-align-justify"></ons-tab> <ons-tab page="page3.html" label="Page 3" icon="fa-align-justify"></ons-tab> </ons-tabbar>page1.html
<ons-page> <ons-toolbar> <div class="center header_title">Page1</div> </ons-toolbar></ons-page><h1 style="text-align:center;">Page1</h1> <br> <div style="text-align:center;"> <ons-button onClick="myNavigator.pushPage('page4.html')">Page4へ</ons-button> <br> Page4へ遷移するとタブが消えます。 </div>
page2.html
<ons-page> <ons-toolbar> <div class="center header_title">Page2</div> </ons-toolbar></ons-page><h1 style="text-align:center;">Page2</h1>
page3.html
<ons-page> <ons-toolbar> <div class="center header_title">Page3</div> </ons-toolbar></ons-page><h1 style="text-align:center;">Page3</h1>
page4.html
<ons-page> <ons-toolbar> <div class="left"><ons-back-button>Back</ons-back-button></div> <div class="center header_title">Page4</div> </ons-toolbar></ons-page> ###試したこと 課題に対してアプローチしたことを記載してください<h1 style="text-align:center;">Page4</h1>
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。