demo.html：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>AngularJS</title><style>nav a {display: inline-block;width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: pink;text-decoration: none;}.active {background-color: red;}section {width: 425px;height: 400px;background-color: lightyellow;}</style><script src="angular.min.js"></script> <!-- 引入AngularJS架構 --></head><body ng-app="App"><div ng-controller="DemoController"><nav><a href="javascript:;" ng-click="myClick('local')" ng-class="{active:type == 'local'}">國內新聞</a><a href="javascript:;" ng-click="myClick('global')" ng-class="{active:type == 'global'}">國際新聞</a><a href="javascript:;" ng-click="myClick('sports')" ng-class="{active:type == 'sports'}">體育新聞</a><a href="javascript:;" ng-click="myClick('funny')" ng-class="{active:type == 'funny'}">娛樂新聞</a></nav><div ng-switch on="type"><section ng-switch-when="local">國內新聞具體內容</section><section ng-switch-when="global">國際新聞具體內容</section><section ng-switch-when="sports">體育新聞具體內容</section><section ng-switch-when="funny">娛樂新聞具體內容</section></div></div><script>var App = angular.module('App',[]);App.controller("DemoController",['$scope',function($scope) {$scope.type = "local"; //預設顯示$scope.myClick = function(type) {$scope.type = type;}}]);</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
