h5 路由跳转与锚点

来源：互联网发布：淘宝小卖家流量编辑：程序博客网时间：2024/06/06 01:33

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: "<div><h2>首页</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"})                    .when("/news", {template: "<div><h2>新闻页面</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"})                    .when("/sport", {template: "<div><h2>体育页面</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"})                    .when("/game", {template: "<div><h2>游戏页面</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"})                    .otherwise({template: "<div><h2>404 Page Not Found!</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"});        }]);    </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><div style="clear: both"></div><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><div style="clear: both"></div><div>    <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></div><div>    <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></div><div>    <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></div><div>    <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></div></body></html>

以上就是路由跳转和锚点的简单代码了

阅读全文

0 0