<!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>
时间： 2024-11-06 08:25:29