Angularjs a way to toggle the tab page

tab Bar of CSS:

1. floor-tab-Li {2     float: Left;3 padding:6px 12px;4font-size:14px;5font-Weight:normal;6line-height:1.42857143;7text-Align:center;8white-Space:nowrap;9vertical-Align:middle;Ten border:1px solid #ddd; Onebackground-color: #ffffff; Aborder-radius:3px; -margin-right:10px; - color: #4c5667; the Cursor:pointer; - } -  - . tabactive { + color: #fff; -background-color: #B36A46; + border:1px solid #B36A46; A}

HTML Code

<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

//TabSelf.scope.tabs =[{title:' Heading 1 ', URL:' A.html '}, {title:' Heading 2 ', URL:' B.html '            }        ]; //Default ItemSelf.scope.currentTab = ' a.html '; Self.scope.onClickTab=function(tab) {Self.scope.currentTab=Tab.url;        }; Self.scope.isActiveTab=function(taburl) {returnTabURL = =Self.scope.currentTab; }

Note: If you change the data refresh data, let the page display that page, such as b.html; in the callback that requests the data interface, add a sentence:

Self.scope.currentTab = ' b.html ';

Angularjs a way to toggle the tab page