1.添加ng-switch="type"
添加 ng-switch-when="html"
2.添加ng-mouseenter="enter('html')"
控制器监听 鼠标移动
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;
/*头部设置往下走3个像素,遮盖住下面的面的内容*/
position: relative;
top: 3px;
/*注意:一定要设置背景颜色*/
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>前端学院</li>
<li>iOS学院</li>
<li>java学院</li>
<li>UI精品学院</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.创建模块
var app = angular.module('app', []);
//2.创建控制器
app.controller('tabController', ['$scope', function ($scope) {
$scope.name = "";
}]);
//3.绑定模块 ng-app="app"
//4.绑定控制器 ng-controller="xmgController"
</script>
</html>
