Tab標簽欄 切換 權威總結

        angular的標簽欄，有兩種方法實現：

1. 1. 內容全部加載到頁面中，再利用ng-show指令。
   2. 將每一塊要加載的內容做成模板，利用ng-if指令加載。
   3. 用bootstrap的tab組件
   4. 用angular的ui-bootstrap中<tab><uib-tab>標簽

　　詳細例子如下：

• 1、ng-show

<script>
var App = angular.module("App",[]);
App.controller('DatailController',['$scope',function($scope){
    $scope.detailDownTitle = {
        title :[
                "選題詳情","關聯內容","推薦內容","流程日志"
                ],
        count : 0,
        datailShow : function(index){
            if(index==0){
                this.count=0;              
            }else if(index==1){
                this.count=1;
            }else if(index==2){
                this.count=2;
            }else if(index==3){
                this.count=3;
            }else{
               
            }
        }
}]);
</script>

　　HTML模板如下：

<div class="detailDown">
    <ul class="detailDownTitle">
        <li data-ng-repeat="title in detailDownTitle.title" data-ng-click="detailDownTitle.datailShow($index)"><a>{{title}}</a></li>  //將$index傳參，確定單擊的哪一個Tab
    </ul>

　　<div data-ng-show="detailDownTitle.count==0">
　　　　<div>Tab1</div>
　　</div>
　　<div data-ng-show="detailDownTitle.count==1">
　　　　<div>Tab2</div>
　　</div>
　　<div data-ng-show="detailDownTitle.count==2">
　　　　<div>Tab3</div>
　　</div>

　　<div data-ng-show="detailDownTitle.count==3">
　　　　<div>Tab4</div>
　　</div>

</div>

　　主頁index.html引入方式如下

    <div class="detailContent" data-ng-include=" 'topicDetail.html' " ng-controller= "DatailController">   //注意路徑
       
    </div>

• 2、ng-if

　　script標簽內容一樣，HTML模板如下：

<div class="detailDown">
    <ul class="detailDownTitle">
        <li data-ng-repeat="title in detailDownTitle.title" data-ng-click="detailDownTitle.datailShow($index)"><a>{{title}}</a></li>
    </ul>
    <div data-ng-include=" '/topic/template/topicContent.html' " data-ng-if="detailDownTitle.count==0"></div>
    <div data-ng-include=" '/topic/template/linkContent.html' " data-ng-if="detailDownTitle.count==1"></div>
    <div data-ng-include=" '/topic/template/recommendContent.html' " data-ng-if="detailDownTitle.count==2"></div>
</div>

•  3、bootstrap組件

　　這里，將bootstrap官網http://v3.bootcss.com/javascript/對應的JavaScript插件代碼做了些許變化。將不同的標簽展示的內容引入不同的模板，而不是寫死的內容。剩下的就是調整一下樣式就可以了。

         <ul class="nav nav-tabs tab-layer" role="tablist">
            <li role="presentation" class="active tab-list">
                <a href="#topic-content" role="tab" data-toggle="tab" >選題詳情</a>
            </li>
            <li role="presentation" class="tab-list">
                <a href="#link-content" role="tab" data-toggle="tab">關聯內容</a>
            </li>
            <li role="presentation" class="tab-list">
                <a href="#recommend-content" role="tab" data-toggle="tab">推薦內容</a>
            </li>
            <li role="preseontation" class="tab-list">
                <a href="#flow-log" role="tab" data-toggle="tab">流程日志</a>
            </li>
        </ul>
        <div class="detail-cnt tab-content">
            <div role="tabpanel" class="tab-pane active" id="topic-content" data-ng-include="'ns-topic/template/topicContent.html'"></div>
            <div role="tabpanel" class="tab-pane" id="link-content" data-ng-include="'ns-topic/template/linkContent.html'"></div>
            <div role="tabpanel" class="tab-pane" id="recommend-content" data-ng-include="'ns-topic/template/recommendContent.html'"></div>
            <div role="tabpanel" class="tab-pane" id="flow-log" data-ng-include="'ns-topic/template/flowLog.html'"></div>    
        </div>

• 4、angular的ui-bootstrap（推薦）

 　　查看相關api，對ui-bootstrap-tpls-0.14.0以前的版本用<tab>標簽，該版本之后的用<uib-tab>標簽。

            <uib-tabset active="activeJustified" justified="true">
                <uib-tab index="0" heading="tab1">tab1內容</uib-tab>
                <uib-tab index="1" heading="tab2">tab2內容</uib-tab>
                <uib-tab index="2" heading="tab3">tab3內容</uib-tab>
            </uib-tabset>

　　這里引用的是最新的版本ui-bootstrap-tpls-2.3.0.min.js，大家可以在這里下載各個版本，不要忘了引入bootstrap.css，測試一下，可以嗎？可以嗎？可以嗎？

　　報錯！

　　報錯！！

　　報錯！！！

　　開始懷疑了，API上寫的為啥不行，哪都沒錯啊，為啥？

　　個人理解是標簽不正規，但是換一種思路，將其作為屬性試一下：

 

            <div uib-tabset active="activeJustified" justified="true">
                <div uib-tab index="0" heading="tab1">tab1內容</div>
                <div uib-tab index="1" heading="tab2">tab2內容</div>
                <div uib-tab index="2" heading="tab3">tab3內容</div>
            </div>

　　done！剩下的就是稍微調整一下樣式就可以了。

　　最后，如果后續發現新的實現方法，會繼續總結