基本介绍
angular框架下的tab切换，相比较于之前的纯js写的代码，有一个很大的特点就是以数据为驱动，基本上不用搜索dom元素就可以实现效果
基本使用
（1）导航部分使用的是的状态使用的是ng-class，只有当参数是true时，才会显示current这个类，每个li标签也绑定了一个事件可以控制type的取值
（2）主体部分使用的ng-switch，当type值发生改变才会显示对应的li标签
<!DOCTYPE html >
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.clearfix:after {
content: ‘‘;
visibility: hidden;
display: block;
clear: both;
}
div {
margin: 120px auto;
width: 400px;
}
.tab {
list-style: none;
background-color: pink;
}
.tab li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
position: relative;
}
.tab li:after {
content: ‘‘;
position: absolute;
height: 20px;
border-right: 1px solid black;
top: 5px;
right: 0px;
}
.tab li:last-child:after {
visibility: hidden;
}
.tab li.current {
background-color: #ccc;
}
.main {
list-style: none;
height: 398px;
border: 1px solid #000;
}
.main li {
width: 400px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 34px;
position: relative;
/*display: none;*/
}
/*.main li.current {*/
/*display: block;*/
/*}*/
</style>
<script src="../libs/angular.min.js"></script>
</head>
<body>
<div ng-controller="DemoController">
<ul class="tab clearfix">
<li ng-click="switch(1)" ng-class="{current:type==1}">1</li>
<li ng-click="switch(2)" ng-class="{current:type==2}">2</li>
<li ng-click="switch(3)" ng-class="{current:type==3}">3</li>
<li ng-click="switch(4)" ng-class="{current:type==4}">4</li>
</ul>
<ul class="main" ng-switch="type">
<li ng-switch-when="1">1</li>
<li ng-switch-when="2">2</li>
<li ng-switch-when="3">3</li>
<li ng-switch-when="4">4</li>
</ul>
</div>
<script>
var App = angular.module(‘App‘, []);
App.controller(‘DemoController‘, [‘$scope‘, function ($scope) {
$scope.type = ‘1‘;
$scope.switch = function (value) {
$scope.type = value;
}
}]);
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/wuqiuxue/p/8410533.html
时间： 2024-08-29 19:46:24