简单美观左侧导航HTML模板：无页面跳转，动态加载子页面内容

这是一个简单美观且易于使用的HTML模板，它使用左侧导航栏来控制右侧内容区域的动态加载，点击左侧导航中的链接，可以在右侧区域加载对应的子页面内容，而无需跳转到新的页面。

HTML 模板

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>简单美观的HTML模板</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}

		.container {
			display: flex;
			flex-direction: row;
			height: 100vh;
		}

		.nav {
			background-color: #f2f2f2;
			width: 200px;
			padding: 20px;
			box-sizing: border-box;
		}

		.nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.nav li {
			margin-bottom: 10px;
		}

		.nav a {
			display: block;
			padding: 10px;
			background-color: #fff;
			color: #333;
			text-decoration: none;
			border-radius: 5px;
			transition: background-color 0.2s ease;
		}

		.nav a:hover {
			background-color: #e6e6e6;
		}

		.content {
			flex: 1;
			padding: 20px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class='container'>
		<div class='nav'>
			<ul>
				<li><a href='#page1'>页面1</a></li>
				<li><a href='#page2'>页面2</a></li>
				<li><a href='#page3'>页面3</a></li>
			</ul>
		</div>
		<div class='content'>
			<div id='page1'>
				<h1>页面1</h1>
				<p>这是页面1的内容。</p>
			</div>
			<div id='page2'>
				<h1>页面2</h1>
				<p>这是页面2的内容。</p>
			</div>
			<div id='page3'>
				<h1>页面3</h1>
				<p>这是页面3的内容。</p>
			</div>
		</div>
	</div>

	<script>
		// 获取所有导航链接和对应的页面元素
		var links = document.querySelectorAll('.nav a');
		var pages = document.querySelectorAll('.content > div');

		// 遍历所有导航链接，为每个链接添加点击事件
		for (var i = 0; i < links.length; i++) {
			var link = links[i];

			// 为链接添加自定义属性，存储对应页面的ID
			link.setAttribute('data-page', link.getAttribute('href'));

			// 为链接添加点击事件
			link.addEventListener('click', function(e) {
				// 阻止默认的链接跳转行为
				e.preventDefault();

				// 获取链接对应的页面ID
				var pageId = this.getAttribute('data-page');

				// 遍历所有页面元素，隐藏非当前页面的元素
				for (var j = 0; j < pages.length; j++) {
					var page = pages[j];

					if (page.getAttribute('id') === pageId) {
						page.style.display = 'block';
					} else {
						page.style.display = 'none';
					}
				}
			});
		}

		// 默认显示第一个页面
		pages[0].style.display = 'block';
	</script>
</body>
</html>

工作原理

HTML 结构: 模板使用 flex 布局，将页面分为左侧导航区域和右侧内容区域。每个页面内容用一个 div 容器包含，并使用唯一的 id 进行标识。
JavaScript: JavaScript 代码会为每个导航链接添加点击事件。点击时，JavaScript 代码会根据链接的 data-page 属性找到对应页面，并显示该页面，同时隐藏其他页面。

使用方法

复制代码: 将以上代码复制到一个新的 HTML 文件中。
修改内容: 在 content 区域的 div 容器中添加你需要的页面内容。
添加导航: 在 nav 区域的 ul 列表中添加更多导航链接。

特点

简单易用: 模板结构清晰简洁，易于理解和修改。
动态加载: 通过 JavaScript 代码实现页面的动态加载，无需页面跳转。
美观大方: 模板使用了简单的 CSS 样式，使其看起来美观大方。

这个简单的HTML模板可以帮助你快速构建一个带有动态加载内容的单页网站，它易于使用且可定制，非常适合初学者使用。

更多关于HTML、CSS和JavaScript的教程和资源，请访问 W3Schools。