html angularjs 实现标签页

HTML和AngularJS可以实现标签页的效果，具体实现方法如下：

1. HTML结构：在HTML中使用ul和li标签来实现标签页的导航栏，使用div标签来显示对应的内容。

<ul class="nav nav-tabs">
  <li ng-class="{active:tab===1}" ng-click="tab=1"><a>标签1</a></li>
  <li ng-class="{active:tab===2}" ng-click="tab=2"><a>标签2</a></li>
  <li ng-class="{active:tab===3}" ng-click="tab=3"><a>标签3</a></li>
</ul>

<div ng-show="tab===1">标签1的内容</div>
<div ng-show="tab===2">标签2的内容</div>
<div ng-show="tab===3">标签3的内容</div>

2. AngularJS控制器：在AngularJS控制器中定义变量tab，用于控制显示哪个标签页的内容。

app.controller('TabsController', function($scope) {
  $scope.tab = 1;
});

3. 样式：可以使用Bootstrap样式来美化标签页的外观。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
var app = angular.module('myApp', []);
app.controller('TabsController', function($scope) {
  $scope.tab = 1;
});
</script>

<ul class="nav nav-tabs">
  <li ng-class="{active:tab===1}" ng-click="tab=1"><a>标签1</a></li>
  <li ng-class="{active:tab===2}" ng-click="tab=2"><a>标签2</a></li>
  <li ng-class="{active:tab===3}" ng-click="tab=3"><a>标签3</a></li>
</ul>

<div ng-show="tab===1">标签1的内容</div>
<div ng-show="tab===2">标签2的内容</div>
<div ng-show="tab===3">标签3的内容</div>