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';

转载于:https://www.cnblogs.com/codebook/p/5917976.html