Angular--tab栏切换
效果图
代码
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Angular---tab切换</title>
<style>
*{margin: 0;padding: 0;}
main{margin:100px auto;width:300px;height:300px;background-color:#333;color:white;text-align:center;}
main .title{cursor:pointer;font-size:28px;}
main .content div{width:100%;margin-top:50px;color:gold;font-size:24px;}
.cur_title{color:skyblue;}
</style>
</head>
<body>
<main ng-controller="MainCtrl as mainCtrl">
<div class="title">
<span ng-mouseenter="mainCtrl.checkTitle('java');" ng-class="mainCtrl.check_cur('java');">java</span>
<span ng-mouseenter="mainCtrl.checkTitle('node');" ng-class="mainCtrl.check_cur('node');">node</span>
<span ng-mouseenter="mainCtrl.checkTitle('php');" ng-class="mainCtrl.check_cur('php');">php</span>
</div>
<div class="content">
<!-- 建立标题和内容的匹配关系 -->
<div ng-show="mainCtrl.title=='java'">java学习</div>
<div ng-show="mainCtrl.title=='node'">node学习</div>
<div ng-show="mainCtrl.title=='php'">php学习</div>
</div>
</main>
<script type="text/javascript" src="js/lib/angular/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("myapp",[]);
myapp.controller("MainCtrl",[function(){
this.title="java";
//用来设置当前title
this.checkTitle=function(title){
this.title=title;
}
//如果控制器中的title和传入的title相同，设置cur高亮
this.check_cur=function(title){
if(title == this.title){
return "cur_title";
}
}
}]);
</script>
</body>
</html>
新指令
ng-mouseenter，等同于jquery中的mouseenter，鼠标进入事件
ng-class,为指定元素添加类名