根据您的需求，下面是一个简单的“
代码随想录”页面的 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">
<h
2>数组理论基础</h
2>
<p>这里是关于数组理论基础的内容。</p>
</div>
<div id="binary-search">
<h
2>二分查找</h
2>
<p>这里是关于二分查找的内容。</p>
</div>
<div id="move-elements">
<h
2>移除元素</h
2>
<p>这里是关于移除元素的内容。</p>
</div>
<div id="linked-list-intro">
<h
2>链表介绍</h
2>
<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 带有锚点时，页面会自动滚动到相应的部分。
您可以根据需要扩展更多的目录项和内容。希望这个模板对您有所帮助！
扫一扫
1527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
