路由

阳光鬼怪

于 2017-10-18 08:25:15 发布

阅读量163

点赞数

分类专栏： 4月Android hybrid跨平台开发

本文链接：https://blog.csdn.net/qq_40087072/article/details/78268853

版权

4月Android hybrid跨平台开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.3.0.js"></script>
    <script src="angular-route.js"></script>
    <script src="jquery-1.11.0.js"></script>
    <style>
        li{
            list-style: none;
            margin: 10px;

        }
        a{
            text-decoration-line: none;
        }
    </style>
    <script>

        var app=angular.module("myApp",["ngRoute"]);
                app.config(["$routeProvider",function ($routeProvider) {
                    $routeProvider
                        .when("/index",{templateUrl:"周考二.html"})
                        .when("/name",{template:"<div style='margin-left: 450px;width: 700px;height: 400px'><ul><li style='background-color: cornflowerblue'>和琪</li><li>张三</li><li>李四</li></ul></div>"})
                        .when("/dz",{template:"<div style='margin-left: 450px;width: 700px;height: 400px'><ul><li style='background-color: cornflowerblue'>上地一街</li><li>上地二街</li><li>上地三街</li></ul></div>"})
                        .otherwise({template:"<div style='margin-left: 450px;width: 700px;height: 400px'><h2>找不到网页啦！</h2></div>"});

                }]);




        $(function () {
            $("#d1").click(function () {
                $("#d1").css("background-color","cornflowerblue");
                $("#d1").css("color","white");
                $("#d2").css("background-color","white");
                $("#d3").css("background-color","white");
            })
            $("#d2").click(function () {
                $("#d1").css("background-color","white");
                $("#d2").css("background-color","cornflowerblue");
                $("#d3").css("background-color","white");
            })
            $("#d3").click(function () {
                $("#d1").css("background-color","white");
                $("#d2").css("background-color","white");
                $("#d3").css("background-color","cornflowerblue");
            })
        })


    </script>
</head>
<body ng-app="myApp">
    <div style="">
        <div style="float:left;margin: 10px"id="d1"><a href="#index">商品列表</a></div>
        <div style="float:left;margin:10px" id="d2"><a href="#name">用户信息</a></div>
        <div style="float: left;margin: 10px"id="d3"><a href="#dz">地址信息</a></div>
    </div>
    <div style="clear: both;"></div>
    <ng-view></ng-view>
</body >
</html>