• 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>
  • 相关阅读:
    【java】之位运算^,&,<<,>>,<<<,>>>总结
    【java】之算法复杂度o(1), o(n), o(logn), o(nlogn)
    【springboot】之自动配置原理
    【git】之使用shell脚本提交代码
    【linux】之日志查看
    【mysql】字段类型和长度的解释
    老生常谈:++a与a--区别
    关于tr:hover变色的问题
    服务器端渲染VS浏览器端渲染
    HTTP状态码302、303、307区别
  • 原文地址:https://www.cnblogs.com/zhangchs/p/9235762.html
Copyright © 2020-2023  润新知