AngularJs锚点监听

来源：互联网发布：嘉兴学院客户端mac 编辑：程序博客网时间：2024/06/05 19:57
<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>AngularJS 路由和多视图</title>      <style>          body {              padding: 0;              margin: 0;              background-color: #F7F7F7;              font-family: Arial;          }            .wrapper {              width: 980px;              margin: 50px auto;          }            ul {              padding: 0;              margin: 0;              overflow: hidden;              list-style: none;              background-color: #000;              border-radius: 4px;          }            li {              float: left;              width: 120px;              height: 40px;              text-align: center;              line-height: 40px;              font-size: 18px;          }            li.active {              background-color: #333;          }            li a {              display: block;              color: #FFF;              text-decoration: none;          }            .content {              margin-top: 30px;              font-size: 24px;              padding: 0 20px;          }      </style>  </head>  <body>      <div class="wrapper">          <!-- 导航菜单 -->          <ul>              <li class="active">                  <a href="#index">Index</a>              </li>              <li>                  <a href="#introduce">Introduce</a>              </li>              <li>                  <a href="#contact">Contact Us</a>              </li>          </ul>          <!-- 内容 -->          <div class="content">              Index Page          </div>      </div>      <script>            // 监听锚点变化然后发送请求          // hashchange事件可以监听锚点变化          window.addEventListener('hashchange', function () {                            var hash = location.hash;// 获取锚点 #index..                        hash = hash.slice(1); // 锚点截取 index..                var xhr = new XMLHttpRequest;                // 将锚点做为参数传递给服务端进处理              xhr.open('get', '10-01.php?hash=' + hash);                xhr.send(null);                xhr.onreadystatechange = function () {                  if(xhr.readyState == 4 && xhr.status == 200) {                      var result = xhr.responseText;                      // 将返回结果添加到页面                      document.querySelector('.content').innerHTML = result;                  }              }          });        </script>  </body>  </html>
0 0