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';
  • 相关阅读:
    全排列(next_permutation)
    Codeforces Round #321 (Div. 2)C(tree dfs)
    cf_ducational Codeforces Round 16_D(gcd)
    cf455a(简单dp)
    cf584a(水题)
    cf112a(水题)
    冒泡排序
    Python内置类型性能分析
    常见时间复杂度
    MongoDB 备份
  • 原文地址:https://www.cnblogs.com/codebook/p/5917976.html
Copyright © 2011-2022 走看看