根据您的需求，下面是
一个简单的“代码
随想录”页面的 HTML 模板。这个模板实现了基本的结构，包括左侧目录和右侧内容区域。点击左侧的一级目录时，会显示其下的二级目录；点击二级目录时，会在右侧显示对应的内容（实际内容未提供，仅作为示例）：
```html
<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<title>代码
随想录</title>
<style>
body {
font
-family: Arial, sans
-serif;
display: flex;
margin: 0;
padding: 0;
}
.sidebar {
width: 20%;
background
-color: #f4f4f4;
padding: 20px;
}
.content {
width: 80%;
padding: 20px;
}
.menu
-item {
cursor: pointer;
padding: 10px;
border
-bottom: 1px solid #ddd;
}
.sub
-menu {
list
-style
-type: none;
padding
-left: 20px;
display: none;
}
.sub
-menu li {
padding: 5px 0;
}
.active {
display: block;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="menu
-item" onclick="toggleSubMenu(this)">数组</div>
<ul class="sub
-menu" style="display: none;">
<li><a href="#array
-theory">数组理论基础</a></li>
<li><a href="#binary
-search">二分查找</a></li>
<li><a href="#move
-elements">移除元素</a></li>
</ul>
<div class="menu
-item" onclick="toggleSubMenu(this)">链表</div>
<ul class="sub
-menu" style="display: none;">
<li><a href="#linked
-list
-intro">链表介绍</a></li>
<!
-- 更多链表子项
-->
</ul>
<!
-- 其他目录项
-->
</div>
<div class="content">
<div id="array
-theory">
<h2>数组理论基础</h2>
<p>这里是关于数组理论基础的内容。</p>
</div>
<div id="binary
-search">
<h2>二分查找</h2>
<p>这里是关于二分查找的内容。</p>
</div>
<div id="move
-elements">
<h2>移除元素</h2>
<p>这里是关于移除元素的内容。</p>
</div>
<div id="linked
-list
-intro">
<h2>链表介绍</h2>
<p>这里是关于链表介绍的内容。</p>
</div>
</div>
<script>
function toggleSubMenu(element) {
const subMenu = element.nextElementSibling;
if (subMenu.style.display === "none") {
subMenu.style.display = "block";
} else {
subMenu.style.display = "none";
}
}
// 自动滚动到锚点位置
window.addEventListener('hashchange', function() {
document.querySelector(window.location.hash).scrollIntoView();
});
// 页面加载时处理初始锚点
window.onload = function() {
if (window.location.hash) {
document.querySelector(window.location.hash).scrollIntoView();
}
};
</script>
</body>
</html>
```
### 功能说明：
1. **左侧目录**：包含多个一级目录项，点击一级目录项时会展开其下的二级目录。
2. **右侧内容区域**：根据点击的二级目录项，在右侧显示相应的内容。
3. **自动滚动**：当 URL 带有锚点时，页面会自动滚动到相应的部分。
您可以根据需要扩展更多的目录项和内容。希望这个模板对您有所帮助！
扫一扫
3559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
