zoukankan      html  css  js  c++  java
  • angular.js实现二级tab切换

     1 <div class="guide-type">
     2         <h3 ng-class="{true:'active', false:''}[tab == 'pc' || tab == 'weixin' || tab == 'app']" ng-click="selectTab('pc');">系统介绍</h3>
     3         <ul ng-show="tab == 'pc' || tab == 'weixin' || tab == 'app'">
     4             <li ng-class="{true:'active', false:''}[tab == 'pc']" ng-click="selectTab('pc');">门户网站</li>
     5             <li ng-class="{true:'active', false:''}[tab == 'weixin']" ng-click="selectTab('weixin');">微信公众号</li>
     6             <li ng-class="{true:'active', false:''}[tab == 'app']" ng-click="selectTab('app');">APP</li>
     7         </ul>
     8     </div>
     9     <div class="guide-type">
    10         <h3 ng-class="{true:'active', false:''}[tab == 'transfer' || tab == 'rent' || tab == 'mortgage']" ng-click="selectTab('transfer');">业务办理</h3>
    11         <ul ng-show="tab == 'transfer' || tab == 'rent' || tab == 'mortgage'">
    12             <li ng-class="{true:'active', false:''}[tab == 'transfer']" ng-click="selectTab('transfer');">转让业务</li>
    13             <li ng-class="{true:'active', false:''}[tab == 'rent']" ng-click="selectTab('rent');">出租业务</li>
    14             <li ng-class="{true:'active', false:''}[tab == 'mortgage']" ng-click="selectTab('mortgage');">抵押业务</li>
    15         </ul>
    16     </div>
    17     <div class="guide-type">
    18         <h3 ng-class="{true:'active', false:''}[tab == 'deposit']" ng-click="selectTab('deposit');">保证金缴纳指南</h3>
    19     </div>
    20     <div class="guide-type">
    21         <h3 ng-class="{true:'active', false:''}[tab == 'register' || tab == 'service']" ng-click="selectTab('register');">常见问题</h3>
    22         <ul ng-show="tab == 'register' || tab == 'service'">
    23             <li ng-class="{true:'active', false:''}[tab == 'register']" ng-click="selectTab('register');">如何进行网站注册</li>
    24             <li ng-class="{true:'active', false:''}[tab == 'service']" ng-click="selectTab('service');">如何申请成为中介</li>
    25         </ul>
    26     </div>
  • 相关阅读:
    ExtJs 4.0 ExtJs2.2 JavaScript
    C++中关于classview、resourceview、fileview
    BIN OBJ 区别
    数据编码
    多线程
    REST
    SQL Server 2005安装
    临时
    数据存储
    灰度直方图
  • 原文地址:https://www.cnblogs.com/zhangchs/p/9235762.html
Copyright © 2011-2022 走看看