AngularJS 路由和多视图

小咪咪 2022-07-12 08:14 185阅读 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 () {
    			// console.log(1);
    			// 获取锚点
    			var hash = location.hash;
    			// 处理#
    			hash = hash.slice(1);
    
    			// 实例对象
    			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>