javascript - 如何从 页面使用 ？

Question

点击“添加图标”后触发“推送页面”会跳转到“tab 1-2.html”

“tab1-2.html”将加载到“tab1.html”

如何改成

让“tab1-2.html”覆盖整个页面

这是我在 CodePen 中的所有代码 https://codepen.io/anon/pen/VOjyry

抱歉我的英文不是很好

我努力改变

<ons-navigator swipeable id="myNavigator" page="tab1.html">

位置但是没有成功

<template id="tab1.html">
            <ons-navigator swipeable id="myNavigator" page="tab1.html">
                <ons-page id="tab1">

                    <p style="text-align: center; margin-top: 15px">
                        <ons-search-input style="width:95%" placeholder="Search"></ons-search-input>
                    </p>

                    <ons-list style="background-color:#eceff1;border: 0px">



                        <ons-fab position="bottom right" id="push-button">
                            <ons-icon icon="md-plus"></ons-icon>
                        </ons-fab>
                </ons-page>
            </ons-navigator>
        </template>

document.addEventListener('show', function(event) {
    var page = event.target;

    console.log("init");

    if (page.id === 'tab1') {
        page.querySelector('#push-button').onclick = function() {
            console.log(page.id);
            document.querySelector('#myNavigator').pushPage('tab1-2.html');
        };
    }
    //tabbar.setTabbarVisibility(false);

});

function closeImage() {
    /*database.transaction(function(tx) {
        database.executeSql('DROP TABLE LOGS');
    });*/
    document.querySelector('ons-navigator').popPage();
}

Answer 1

尝试使用 <ons-navigatore>包装到 <ons-tabbar>

<ons-navigator id="myNavigator">
  <ons-page>
    <ons-toolbar>
      <div class="center">Navigator+Tabbar</div>
    </ons-toolbar>
    <ons-tabbar position="auto">
      <ons-tab page="home.html" active icon="ion-home" label="Home"></ons-tab>
      <ons-tab icon="ion-card" label="Cards" badge="3" page="cards.html"></ons-tab>
      <ons-tab icon="ion-ios-cog" label="Settings" page="settings.html"></ons-tab>
    </ons-tabbar>
  </ons-page>
</ons-navigator>

引用: Official Playground: Combining Navigator and Tabbar