zoukankan      html  css  js  c++  java
  • angularjs 切换tab页的一个方法

    tab条的 css:

     1 .floor-tab-li {
     2     float: left;
     3     padding: 6px 12px;
     4     font-size: 14px;
     5     font-weight: normal;
     6     line-height: 1.42857143;
     7     text-align: center;
     8     white-space: nowrap;
     9     vertical-align: middle;
    10     border: 1px solid #ddd;
    11     background-color: #ffffff;
    12     border-radius: 3px;
    13     margin-right: 10px;
    14     color: #4c5667;
    15     cursor:pointer;
    16 }
    17 
    18 .tabActive {
    19     color: #fff;
    20     background-color: #B36A46;
    21     border: 1px solid #B36A46;
    22 }

    HTML 代码

    <div class="tab">
        <ul class="floor-tab fix">
            <li class="floor-tab-li" ng-repeat="tab in tabs"
                ng-class="{tabActive:isActiveTab(tab.url)}"
                ng-click="onClickTab(tab)">
                {{tab.title}}
            </li>
        </ul>
    </div>
    
    <div class="card-box">
        <div ng-include="currentTab"></div>
    </div>
    
    <script type="text/ng-template" id="a.html">
            //a.html
    </script>
    <script type="text/ng-template" id="b.html">
            //b.html
    </script>

    javascript

    //tab
            self.scope.tabs = [
                {
                    title: '标题1',
                    url: 'a.html'
                },
                {
                    title: '标题2',
                    url: 'b.html'
                }
            ];
    
            //默认项
            self.scope.currentTab = 'a.html';
    
            self.scope.onClickTab = function (tab) {
                self.scope.currentTab = tab.url;
            };
    
            self.scope.isActiveTab = function(tabUrl) {
                return tabUrl == self.scope.currentTab;
            }

    注:倘若更改了数据刷新数据时让页面显示那个页面,比如b.html;在请求数据接口的回调中添加一句:

     self.scope.currentTab = 'b.html';
  • 相关阅读:
    HDU 5492 Find a path
    codeforce gym 100548H The Problem to Make You Happy
    Topcoder SRM 144 Lottery
    codeforce 165E Compatible Numbers
    codeforce gym 100307H Hack Protection
    区间DP总结
    UESTC 1321 柱爷的恋爱 (区间DP)
    HDU 4283 You Are the One (区间DP)
    HDU 2476 String painter (区间DP)
    UESTC 426 Food Delivery (区间DP)
  • 原文地址:https://www.cnblogs.com/codebook/p/5917976.html
Copyright © 2011-2022 走看看