1.添加ng-switch="type"
添加 ng-switch-when="html"
2.添加ng-mouseenter="enter('html')"
控制器監(jiān)聽 鼠標(biāo)移動(dòng)
3.ng-class="{cur:type=='html'}"
模版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
.box{
width: 1000px;
margin: 50px auto;
}
.box .title{
width: 400px;
height: 44px;
border: 3px solid #ccc;
/*頭部設(shè)置往下走3個(gè)像素,遮蓋住下面的面的內(nèi)容*/
position: relative;
top: 3px;
/*注意:一定要設(shè)置背景顏色*/
background: #fff;
border-bottom:none;
}
.box .content{
width: 1000px;
height: 475px;
border: 3px solid #ccc;
}
.box .content img{
width: 1000px;
height: 475px;
}
.box ul{
overflow: hidden;
}
.box ul li{
float: left;
padding: 10px;
}
.box ul .cur{
color:red;
font-size: 18px;
}
/*把所有content下面的div給隱藏掉*/
</style>
</head>
<body ng-app="app" ng-controller="tabController">
<div class="box">
<div class="title">
<ul>
<li>前端學(xué)院</li>
<li>iOS學(xué)院</li>
<li>java學(xué)院</li>
<li>UI精品學(xué)院</li>
</ul>
</div>
<div class="content">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
<script src="js/angular.js"></script>
<script>
//1.創(chuàng)建模塊
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('tabController', ['$scope', function ($scope) {
$scope.name = "";
}]);
//3.綁定模塊 ng-app="app"
//4.綁定控制器 ng-controller="xmgController"
</script>
</html>
