标签:turn tar text doctype click play e30 other item
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ display: inline-block; width: 200px; height: 40px; line-height: 40px; text-align: center; border: 1px solid #000; text-decoration: none; } .blue{ background: blue; color: #fff; } .ff{ background: none; color: #000; } h2{ color: red; } </style> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js "></script> <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js "></script> <script> var myapp=angular.module("myapp",["ngRoute"]); myapp.config(function($routeProvider){ console.log($routeProvider); $routeProvider.when("/home",{ templateUrl:"views/home.html", controller:"homeCtrl" }).when("/detail",{ templateUrl:"views/detail.html", controller:"detailCtrl" }).when("/news",{ templateUrl:"views/news.html" }).otherwise({ redirectTo:"/home" }) }); myapp.controller("myCtrl",function($scope){ $scope.name="a"; $scope.dj="sy"; $scope.sx="sy"; $scope.fun=function(name){ $scope.dj=name; }; $scope.get=function(item){ $scope.sx=item; if($scope.dj==$scope.sx){ return "blue" }else{ return "ff" } } }); myapp.controller("homeCtrl",function($scope){ $scope.name="首页控制"; }); myapp.controller("detailCtrl",function($scope){ $scope.name="详情控制"; }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <p>{{name}}</p> <a href="#home" class="blue" ng-click="fun(‘sy‘)" ng-class="get(‘sy‘)">首页</a> <a href="#detail" ng-click="fun(‘xq‘)" ng-class="get(‘xq‘)">详情页</a> <a href="#news" ng-click="fun(‘xw‘)" ng-class="get(‘xw‘)">新闻页</a> <ng-view> </ng-view> </body> </html>
//例如
<h2>这是首页</h2>
其他页面可以用<p>{{name}}</p>
标签:turn tar text doctype click play e30 other item
原文地址:http://www.cnblogs.com/yangzhewoaini/p/7680717.html