HTML左右分页2【搬代码】

news2025/3/13 4:35:55

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', () => {
         // 获取点击列表项对应的内容 ID
         const 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>