cari

Rumah  >  Artikel  >  hujung hadapan web  >  h5路由跳转的实现方法

h5路由跳转的实现方法

一个新手
一个新手asal
2017-10-17 10:22:093263semak imbas

路由跳转,有两种表现方式

1 横向

:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="angular.js" type="text/javascript"></script>
    <script src="angular-route.js" type="text/javascript"></script>
    <title>路由</title>
    <style type="text/css">
        li {
            list-style: none;
            float: left;
            margin: 8px;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("myApp", ["ngRoute"]);

        app.config(["$routeProvider", function ($routeProvider) {
            $routeProvider
                    .when("/index", {template: "<p><h2>首页</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></p>"})
                    .when("/news", {template: "<p><h2>新闻页面</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></p>"})
                    .when("/sport", {template: "<p><h2>体育页面</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></p>"})
                    .when("/game", {template: "<p><h2>游戏页面</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></p>"})
                    .otherwise({template: "<p><h2>404 Page Not Found!</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></p>"});
        }]);
    </script>
</head>
<body ng-app="myApp">
<ul>
    <li><a href="#/index">首页</a></li>
    <li><a href="#/news">新闻</a></li>
    <li><a href="#/sport">体育</a></li>
    <li><a href="#/game">游戏</a></li>
    <li><a href="#/other">其他</a></li>
</ul>

<p style="clear: both"></p>

<ng-view></ng-view>
</body>
</html>

2.纵向:


代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
    <style type="text/css">
        li {
            list-style: none;
            float: left;
            margin: 8px;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#index">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#sport">体育 </a></li>
    <li><a href="#game">游戏</a></li>
</ul>

<p style="clear: both"></p>

<p>
    <a id="index"></a>

    <h2>首页</h2>
    <hr>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
</p>

<p>
    <a id="news"></a>

    <h2>新闻页面</h2>
    <hr>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
</p>

<p>
    <a id="sport"></a>

    <h2>体育页面</h2>
    <hr>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
</p>

<p>
    <a id="game"></a>

    <h2>游戏页面</h2>
    <hr>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
</p>
</body>
</html>


Atas ialah kandungan terperinci h5路由跳转的实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery easyUI中实现表格的跨行跨列的方法Artikel seterusnya：angular表单校验方法

Artikel berkaitan

Lihat lagi