HTML左右分页2【搬代码】

HTML左右分页2

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>左右分页布局</title><link rel="stylesheet" href="style.css"></link>
</head><body><!-- 左侧导航栏 --><div id="left-nav"><!-- 第一个下拉框 --><div class="dropdown"><button class="dropdown-btn">菜单 1</button><ul class="dropdown-content"><li data-content="content1">子菜单 1-1</li><li data-content="content2">子菜单 1-2</li></ul></div><!-- 第二个下拉框 --><div class="dropdown"><button class="dropdown-btn">菜单 2</button><ul class="dropdown-content"><li data-content="content3">子菜单 2-1</li><li data-content="content4">子菜单 2-2</li></ul></div></div><!-- 右侧内容区域 --><div id="right-content"><!-- 顶部操作栏 --><div id="top-bar"><!-- 隐藏导航栏按钮 --><button id="toggle-nav">☰</button><!-- 右上角个人中心图标 --><span id="profile-icon">👤</span></div><!-- 内容显示区域 --><div id="content-area"><div id="content1" class="show"><div class="content1-child">这是 content1 里的第一个子 div 内容</div><div class="content1-child">这是 content1 里的第二个子 div 内容</div></div><div id="content2" class="hide"><div class="content2-child">这是 content2 里的第一个子 div 内容</div><div class="content2-child">这是 content2 里的第二个子 div 内容</div></div><div id="content3" class="hide"><div class="content3-child">这是 content3 里的第一个子 div 内容</div><div class="content3-child">这是 content3 里的第二个子 div 内容</div></div><div id="content4" class="hide"><div class="content4-child">这是 content4 里的第一个子 div 内容</div><div class="content4-child">这是 content4 里的第二个子 div 内容</div></div></div></div>
</body>
<script src="script.js"></script>
</html>

css

<style>
/* 整体页面样式 */
body {margin: 0;padding: 0;font-family: Arial, sans-serif;display: flex;height: 100vh;
}/* 左侧导航栏样式 */
#left-nav {position: fixed;width: 200px;height: 100vh;background-color: #333;color: white;padding-top: 20px;transition: width 0.3s ease;overflow-y: auto;
}/* 隐藏左侧导航栏时的样式 */
#left-nav.hidden {width: 0;overflow: hidden;
}/* 导航栏下拉框样式 */
.dropdown {position: relative;display: block;
}/* 下拉框按钮样式 */
.dropdown-btn {background-color: #333;color: white;padding: 10px;width: 100%;border: none;text-align: left;cursor: pointer;
}/* 下拉框内容样式 */
.dropdown-content {display: none;position: relative;background-color: #444;width: 100%;
}/* 下拉框内容列表项样式 */
.dropdown-content li {padding: 10px;cursor: pointer;
}/* 下拉框内容列表项悬停样式 */
.dropdown-content li:hover {background-color: #555;
}/* 右侧内容区域样式 */
#right-content {flex: 1;display: flex;flex-direction: column;margin-left: 200px; /* 留出左侧导航栏的空间 */
}/* 顶部操作栏样式 */
#top-bar {display: flex;justify-content: space-between;align-items: center;padding: 10px;background-color: #f0f0f0;
}/* 隐藏导航栏按钮样式 */
#toggle-nav {background: none;border: none;font-size: 20px;cursor: pointer;
}/* 右上角个人中心图标样式 */
#profile-icon {font-size: 20px;cursor: pointer;
}/* 内容显示区域样式 */
#content-area {padding: 20px;overflow-y: auto;
}/* 内容区域显示与隐藏类 */
.show {display: flex;justify-content: space-around;
}.hide {display: none;
}/* content1 内子 div 样式 */
.content1-child {background-color: lightblue;padding: 10px;margin: 5px;flex: 1;
}/* content2 内子 div 样式 */
.content2-child {background-color: lightgreen;padding: 10px;margin: 5px;flex: 1;
}/* content3 内子 div 样式 */
.content3-child {background-color: lightcoral;padding: 10px;margin: 5px;flex: 1;
}/* content4 内子 div 样式 */
.content4-child {background-color: lightyellow;padding: 10px;margin: 5px;flex: 1;
}
</style>

script

<script>// 获取左侧导航栏元素const leftNav = document.getElementById('left-nav');// 获取切换导航栏按钮元素const toggleNav = document.getElementById('toggle-nav');// 获取所有下拉框按钮元素const dropdownBtns = document.querySelectorAll('.dropdown-btn');// 获取导航栏所有列表项元素const navItems = document.querySelectorAll('.dropdown-content li');// 获取所有内容区域元素const contents = document.querySelectorAll('#content-area > div');// 为切换导航栏按钮添加点击事件监听器toggleNav.addEventListener('click', () => {leftNav.classList.toggle('hidden');if (leftNav.classList.contains('hidden')) {document.getElementById('right-content').style.marginLeft = '0';} else {document.getElementById('right-content').style.marginLeft = '200px';}});// 为下拉框按钮添加点击事件监听器dropdownBtns.forEach(btn => {btn.addEventListener('click', () => {const dropdownContent = btn.nextElementSibling;dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';});});// 为导航栏列表项添加点击事件监听器navItems.forEach(item => {item.addEventListener('click', () => {// 获取点击列表项对应的内容 IDconst contentId = item.dataset.content;console.log(`点击了 ${item.textContent}，对应的内容 ID 是 ${contentId}`);// 隐藏所有内容区域contents.forEach(content => {content.classList.add('hide');content.classList.remove('show');});// 显示点击列表项对应的内容区域const selectedContent = document.getElementById(contentId);if (selectedContent) {selectedContent.classList.add('show');selectedContent.classList.remove('hide');console.log(`显示内容区域 ${contentId}`);} else {console.error(`未找到 ID 为 ${contentId} 的内容区域`);}});});// 获取个人中心图标元素const profileIcon = document.getElementById('profile-icon');// 为个人中心图标添加点击事件监听器profileIcon.addEventListener('click', () => {// 这里可以添加进入个人中心的逻辑，例如跳转到个人中心页面alert('进入个人中心');});
</script>