HTML route点击不同按钮,显示不同内容,可以改变按钮背景颜色

最新推荐文章于 2023-10-23 15:57:11 发布

qq_4027

最新推荐文章于 2023-10-23 15:57:11 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：网页

本文链接：https://blog.youkuaiyun.com/qq_40143811/article/details/78271751

网页专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现页面路由的实例，通过定义不同的路由规则和控制器，实现了商品列表、用户信息和地址信息等不同页面的展示。文章展示了如何设置路由、创建控制器以及通过链接进行页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           li {
               list-style-type: none;
           }

           a {
               float: left;
               line-height: 60px;
               display: block;
               text-decoration: none;
               color: black;
               font-size: 30px;
               width: 33.3%;height: 60px;
           }

           h1{margin-left: 10px;}
       </style>
       <script type="text/javascript" src="js/angular.min.js"></script>
       
       <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
       <script>
           window.onload = function() {
               var _span = document.getElementsByTagName('a');
               var CBody = document.getElementsByTagName('a');
               _span[0].onclick = function() {
                   CBody[0].style.background = "#CCE8CF";
                   CBody[1].style.background = "#fff";
                   CBody[2].style.background = "#fff";
               }
               _span[1].onclick = function() {
                   CBody[0].style.background = "#fff";
                   CBody[1].style.background = "#CCE8CF";
                   CBody[2].style.background = "#fff";
               }
               _span[2].onclick = function() {
                   CBody[0].style.background = "#fff";
                   CBody[1].style.background = "#fff";
                   CBody[2].style.background = "#CCE8CF";
               }

               var h = document.getElementsByTagName('h1');
               var hh = document.getElementsByTagName('h1');
               h[0].onclick = function() {
                   hh[0].style.background = "#CCE8CF";
                   hh[1].style.background = "#fff";
                   hh[2].style.background = "#fff";
               }
               h[1].onclick = function() {
                   hh[0].style.background = "#fff";
                   hh[1].style.background = "#CCE8CF";
                   hh[2].style.background = "#fff";
               }
               h[2].onclick = function() {
                   hh[0].style.background = "#fff";
                   hh[1].style.background = "#fff";
                   hh[2].style.background = "#CCE8CF";
               }
           }
       </script>

   </head>

   <body ng-app='routeDemo'>
       
       <div id="navigator" style="width: 30%;height: 60px;border: 1px solid #000000;margin-left: 35%;">
           
           <center>
               <a href="#/home">商品列表</a>
               <a href="#/woman">用户信息</a>
               <a href="#/man">地址信息</a>
           </center>
       </div>
       

       <div style="width: 80%;display: inline-block;height: 300px;border: 1px solid #aaa;margin-left: 10%;">
           <div ng-view=""></div>
       </div>

   </body>
   <script type="text/ng-template" id="index.home.html">
       <h1>电脑1</h1>
       <h1>电脑2</h1>
       <h1>电脑3</h1>
   </script>
   <script type="text/ng-template" id="index.woman.html">
       <h1>张三</h1>
       <h1>李四</h1>
       <h1>王五</h1>
   </script>
   <script type="text/ng-template" id="index.man.html">
       <h1 onclick="">上帝一街</h1>
       <h1>上帝二街</h1>
       <h1>上帝三街</h1>
   </script>

   <script type="text/javascript">
       angular.module('routeDemo', ['ngRoute'])
           .controller('HomeController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('WomanController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('WomanController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('ManController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('LifeController', function($scope, $route) {
               $scope.$route = $route;
           })
           .controller('CookController', function($scope, $route) {
               $scope.$route = $route;
           })

           //配置$routeProvider用来定义路由规则
           //$routeProvider为我们提供了when（path，object）& other(object)函数按顺序定义所有路由，函数包含两个参数：
           //@param1:url或者url正则规则
           //@param2：路由配置对象
           .config(function($routeProvider) {
               $routeProvider.
               when('/home', {
                   //templateURL：插入ng-view的HTML模板文件
                   templateUrl: 'index.home.html',
                   controller: 'HomeController'

               }).
               when('/woman', {
                   templateUrl: 'index.woman.html',
                   controller: 'WomanController'
               }).
               when('/man', {
                   templateUrl: 'index.man.html',
                   controller: 'ManController'
               }).
               when('/life', {
                   templateUrl: 'index.life.html',
                   controller: 'LifeController'
               }).
               when('/cook', {
                   templateUrl: 'index.cook.html',
                   controller: 'CookController'
               })
           })
   </script>

</html>