Question

我正在处理一个应用程序，该应用程序显示带有标题和主页按钮的标题，下方的图像滑块以及下方的按钮栏作为页脚。图像滑块是默认内容。单击按钮栏中的按钮后，是否可以用html页面替换图像滑块？或者至少隐藏图像滑块并显示一个html页面？

到目前为止我的代码：

<ion-view id="page1" view-title="{{ logo }}" style="background-color:#f1f1f1;">

 <ion-nav-buttons side="right">

 <button id="page-button5" class="button buttonhome" style="background: transparent; border: 0;">
   <img class="home" src="img/finalimages/home.png">
</button>
</ion-nav-buttons>
</ion-nav-bar>

 <ion-content padding="false" background-color="#f1f1f1" >

<ion-slides disable-side-menu-drag="" options="{'loop': true}" slider="slider1" delegate-handle="slider1" id="page-slider1" style="width: 100%; ">
  <ion-slide-page id="page-slide28" style="background:url(&quot;img/swipeHome1.png&quot;) no-repeat center;background-size:cover;"></ion-slide-page>
  <ion-slide-page id="page-slide27" style="background:url(&quot;img/avfsZwJT9WGsBj982ul1_kitten1.jpg&quot;) no-repeat center;background-size:cover;"></ion-slide-page>
  <ion-slide-page id="page-slide29" style="background:url(&quot;img/WE6rB9dZRTiIWQlP5qsA_kitten3.jpg&quot;) no-repeat center;background-size:cover;"></ion-slide-page>
 </ion-slides>

 <div id="page-button-bar2" class="button-bar">
    <div style="display: inline;"> 
  <button id="page-button11" style="font-size:12px; background: #f1f1f1 !important; border: 0;" class="button button-stable button-block bottommenu">
    <img class="wallet" src="img/finalimages/wallet.png">
    <h6 style="margin-top: -10px!important; color: #808080; position: left left">电子竞技</h6>
  </button>
  </div>

  <div style="display: inline;"> 
  <button id="page-button12" style="font-size:12px; background: #f1f1f1 !important; border: 0;" class="button button-stable button-block bottommenu">
    <img class="esports" src="img/finalimages/joystick.png">
    <h6 style="margin-top: -10px!important; color: #808080; position: left left">电子竞技</h6>
  </button>
  </div>

  <div style="display: inline;">
    <button id="page-button13" style="font-size:12px; background: #f1f1f1 !important; border: 0;" class="button button-stable button-block bottommenu">
    <img class="events" src="img/finalimages/s-ball.png">
    <h6 style="margin-top: -10px!important; color: #808080;">运动赛事</h6>
    </button>
  </div>

  <div style="display: inline;"> 
  <button id="page-button14" style="font-size:12px; background: #f1f1f1 !important; border: 0;" class="button button-stable button-block bottommenu">
    <img class="discount" src="img/finalimages/gift.png">
    <h6 style="margin-top: -10px!important; color: #808080;">优惠</h6>
  </button>
  </div>

  <div  class="dropdown">
  <button id="page-button15" ng-click="toggleInfo()" class="button button-stable button-block bottommenu" style="font-size:12px; background: #f1f1f1 !important; border: 0;" ><img class="information" src="img/finalimages/icon-menu.png"><h6 style="margin-top: -10px!important; color: #808080; ">资讯</h6></button>
  <div class="dropdown-content dropdown-content-up-info" ng-show="IsInfoVisible">
  <a href="#">关於我们</a>
  <a href="#">联系我们</a>
  <a href="#">用户协议</a>
  </div>
  </div>


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

按钮栏作为标签栏离子

0 个答案: