前提・実現したいこと
monacaでハイブリッドアプリを開発しようと
試みております。
タブがありつつ
タブ上のボタンを押下すると別ページに遷移するように実装をしたいのですが、
他ソースコードやサンプルをコピペしても遷移が行われません。
HTMLのみで完結できるのか、JS周りをいじらなきゃいけないのかなど
初心者な為、不明点が多数あります・・・。
初歩的な質問で大変申し訳ございませんが、
ご教授ください。よろしくお願いいたします。
補足:index.html内で完結させようとしています。
他のhtmlファイルなどを追加せず解決しようと思っております。
発生している問題・エラーメッセージ
ボタンを押しても遷移しない。
該当のソースコード
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: 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> <script src="lib/onsenui/js/onsenui.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> <body> <ons-navigator var="myNavigator"page="tab.html"> </ons-navigator> <template id="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> </template> <template id="page1.html"> <ons-page> <ons-toolbar> <div class="center header_title">Page1</div> </ons-toolbar> <h1 style="text-align:center;">Page1</h1> <br> <div style="text-align:center;"> <ons-button ngClick="myNavigator.pushPage('page4.html')">Page4へ</ons-button> <br> Page4へ遷移するとタブが消えます。 </div> </ons-page> </template> <template id="page2.html"> <ons-page> <ons-toolbar> <div class="center header_title">Page2</div> </ons-toolbar> <h1 style="text-align:center;">Page2</h1> </ons-page> </template> <template id="page3.html"> <ons-page> <ons-toolbar> <div class="center header_title">Page2</div> </ons-toolbar> <h1 style="text-align:center;">Page2</h1> </ons-page> </template> <template id="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> <h1 style="text-align:center;">Page4</h1> </ons-page> </template> </body> </head> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/20 23:15