AngularJS 路由和多视图

最新推荐文章于 2022-01-05 14:43:57 发布

约德尔蒙

最新推荐文章于 2022-01-05 14:43:57 发布

阅读量328

点赞数

分类专栏： AngularJs

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

版权

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 () {
			// 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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 路由和多视图

AngularJS 路由和多视图 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; } .wrapper { width: 980px; margin: 50px auto; } ul { padding: 0; mar
复制链接

扫一扫

专栏目录