使用AngularJS制作一个选项卡

最新推荐文章于 2020-06-19 17:10:22 发布

老米的世界

最新推荐文章于 2020-06-19 17:10:22 发布

阅读量1k

点赞数 1

分类专栏： AngularJS 文章标签： angularjs html

本文链接：https://blog.csdn.net/MPFLY/article/details/76906535

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML：

<!DOCTYPE html>
<html ng-app="tabApp">
    <head>
        <meta charset="UTF-8">
        <title>tabs02</title>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <link rel="stylesheet" href="../css/tabs01.css" />
    </head>

    <body>
        <div class="container" ng-controller="tabCtrl">
            <ul ng-init='tab=0'>
                <li ng-class='{active:tab==$index}' ng-click="show($index)" ng-repeat="x in arrays">{{x.title}}</li>
            </ul>
            <div class="Tabdiv">
                <div ng-show="tab==$index" ng-repeat="x in arrays">{{x.word}}</div>
            </div>
        </div>
    </body>
</html>

JS：

<script>
        var app = angular.module("tabApp",[]);
        app.controller('tabCtrl',function($scope){
            $scope.arrays = [
            {"title":"湖人",
             "word":"科比，奥尼尔、贾巴尔"
            },{
                "title":"热火",
                "word":"韦德，波什"
            },{
                "title":"骑士",
                "word":"詹姆斯，欧文"
            },{
                "title":"马刺",
                "word":"邓肯、帕克、吉诺比利"
            }];
            $scope.show = function(index){
                $scope.tab = index;
            };
        });
    </script>

CSS：

* {
    list-style: none;
    margin: 0;
    padding: 0;
}
.container{
    width: 500px;
    height: 300px;
}
.Tabdiv{
    width: 405px;
    height: 200px;
    background: #eee;
    border: 1px solid black;
    border-top: none;
}
ul li{
    width: 100px;
    height: 30px;
    text-align: center;
    display: block;
    float: left;
    background: #CCCCCC;
    border: 1px solid #EDEDED;
    cursor: pointer;
    padding: 5px 0;
}
ul li.active{
    background: #eee;
    border-bottom: none;
}

图片：

这里写图片描述

老米的世界

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用AngularJS制作一个选项卡

HTML：<!DOCTYPE html><html ng-app="tabApp"> <head> <meta charset="UTF-8"> <title>tabs02</title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.j
复制链接

扫一扫

专栏目录