Question

目前，我有这些离子标签内容的代码。我想要实现的是创建（2）选项卡。我设法创建了这两个选项卡，但这些代码似乎不起作用。我不知道为什么每当我点击“标签2内容（标签）”时，标签位于“标签1内容”（默认情况下），它将引导我到另一个页面（HomePage.html），而不是显示预期的内容（这是在同一页面），反之亦然。我能想到的一个可能的原因是，如果宣布我的Sidemenu.html是这样的话会有任何崩溃。（虽然我没有说明Sidemenu.html和TabContent.html之间存在崩溃）

TabContent.html

   <ion-view view-title="Tabs">
        <ion-pane>
            <ion-tabs class="tabs-top">

                <!-- Tab 1 -->
                <ion-tab title="Tab 1" href="#/tab/tab1">
                    <ion-nav-view name="tab-tab1">
                        <ion-content>
                            Tab 1 content
                        </ion-content>

                    </ion-nav-view>
                </ion-tab>


                <!-- Tab 2 -->
                <ion-tab title="Tab 1" href="#/tab/tab2">
                    <ion-nav-view name="tab-tab2">
                        <ion-content>
                            Tab 2 content
                        </ion-content>
                    </ion-nav-view>
                </ion-tab>
            </ion-tabs>

        </ion-pane>
    </ion-view>

SideMenu.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>

    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/search">
          QR Code
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          User Profile
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Setting
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          E-Receipt
         </ion-item>
          <ion-item menu-close href="#/app/BitCoin"  ng-click="clickerBit(item);"  ng-mouseenter="searching();">
         BitCoin     
         </ion-item>
          <ion-item menu-close href="#/app/Membership">
     membership
          </ion-item>
          <ion-item menu-close href="#/app/Redeemption" ng-click="clicker(item);">
            redeemption
          </ion-item>

      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

HomePage.html

 <ion-view view-title="Home">
        <ion-content>



     <h2>Welcome, " "</h2>

            <img class="homeImg" src="../img/qr.png" width="100" height="100" >
            <br />
            <img class="homeImg" src="../img/profile.png" width="100" height="100">
            <br />
            <img class="homeImg" src="../img/ereceipt.png" width="120" height="120">
            <br />

            <img class="homeImg" src="../img/settings.png" width="100" height="100">
            <input id="target" type="button" value="Insert Data" onclick="AddValueToDB()" />
            <script src="//code.jquery.com/jquery-2.0.2.min.js"></script>



            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script src="js/BitCoin.js"></script>




        </ion-content>
    </ion-view>

Answer 1

<ion-tab title="Tab 1" href="#/tab/tab2">

href属性是造成麻烦的原因。如果您点击标签页，您的应用程序将尝试转到＆＃39;＃/ tab / tab2＆＃39;因为，我想，你没有任何状态与该网址，ui路由器将你重定向到默认网址，这必须是你的主页。

所以也许删除href属性或用＃/ tab / tab2创建一个状态和你内容的html（这是一个很好的实践）。

如何在ionic cordova创建标签内容？

1 个答案: