AngularJs锚点监听

超、凢脫俗 2022-07-12 07:08 75阅读 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>