使用AngularJS制作一个选项卡

来源：互联网发布：无人机航拍软件编辑：程序博客网时间：2024/06/07 01:39

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