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

angularjs 切換tab頁的一個方法