angular版选项卡

最新推荐文章于 2024-08-06 12:58:11 发布

weixin_30498807

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量87

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/qiudongjie/p/6602701.html

版权

<!DOCTYPE html>
<html lang="en" ng-app="tab">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
            list-style: none;
        }
        #box1{
            width:500px;
            height:500px;
            border:1px solid red;
        }
        #box1 input{
            background: yellow;
        }
        #box1 .active{
            background: red;
        }
        #box1 div{
            width:300px;
            height:300px;
            background: red;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            display: none;
        }
        #box1 .show{
            display: block;
        }
    </style>
    <script src="angular.js"></script>
</head>
<body ng-controller="tabone">
    <div id="box1" >
        <input type="button" ng-repeat="json in arr" value="{{json.name}}" class="{{num == $index?'active':''}}" ng-click="fn($index)">
        <div ng-repeat="json in arr" class="{{num == $index?'show':''}}">{{json.content}}</div>
    </div>
    <script>
        var app = angular.module('tab',[]);
        app.controller('tabone',function ($scope) {
            $scope.num = 0;
            $scope.arr = [
                {'name':'按钮1','content':'1'},
                {'name':'按钮2','content':'2'},
                {'name':'按钮3','content':'3'}
            ];
            $scope.fn = function (n) {
                $scope.num = n;
            }
        })
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/qiudongjie/p/6602701.html

weixin_30498807

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular版选项卡

<!DOCTYPE html><html lang="en" ng-app="tab"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; mar...
复制链接

扫一扫