Tab标签栏切换权威总结

Posted 2020-08-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Tab标签栏切换权威总结相关的知识，希望对你有一定的参考价值。

angular的标签栏，有两种方法实现：

1. 内容全部加载到页面中，再利用ng-show指令。
2. 将每一块要加载的内容做成模板，利用ng-if指令加载。

　　详细例子如下：

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>

　　主页index.html引入方式如下

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

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>

如果后续发现新的实现方法，会继续总结

以上是关于Tab标签栏切换权威总结的主要内容，如果未能解决你的问题，请参考以下文章

Tab标签栏 切换 权威总结

Tab标签栏切换权威总结