AngularJs锚点监听

最新推荐文章于 2022-01-08 17:45:20 发布

约德尔蒙

最新推荐文章于 2022-01-08 17:45:20 发布

阅读量383

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/gyq04551/article/details/55222720

版权

AngularJs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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>