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