当前位置：首页 > 问答 > 正文

用DIV实现左侧导航栏点击右侧显示内容：非iframe方案探讨

问答
2025-01-27 07:30:40
72
更新：2025-01-27 07:30:40

本文目录导读：

HTML 结构
CSS 样式
JavaScript 逻辑
解释

的布局，而不使用 iframe，可以通过 HTML、CSS 和 JavaScript 来完成，以下是一个基本的实现方案：

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="styles.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li><a href="#" data-content="page1">页面 1</a></li>
                <li><a href="#" data-content="page2">页面 2</a></li>
                <li><a href="#" data-content="page3">页面 3</a></li>
            </ul>
        </div>
        <div class="content">
            <div id="page1" class="page">这是页面 1 的内容。</div>
            <div id="page2" class="page">这是页面 2 的内容。</div>
            <div id="page3" class="page">这是页面 3 的内容。</div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.container {
    display: flex;
    height: 100vh;
}
.sidebar {
    width: 200px;
    background-color: #333;
    color: white;
    padding: 20px;
}
.sidebar ul {
    list-style-type: none;
    padding: 0;
}
.sidebar li {
    margin-bottom: 10px;
}
.sidebar a {
    color: white;
    text-decoration: none;
}
.sidebar a:hover {
    text-decoration: underline;
}
.content {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
}
.page {
    display: none;
}
.page.active {
    display: block;
}

JavaScript 逻辑

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('.sidebar a');
    const pages = document.querySelectorAll('.page');
    links.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            const contentId = this.getAttribute('data-content');
            pages.forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(contentId).classList.add('active');
        });
    });
    // 默认显示第一个页面内容
    if (pages.length > 0) {
        pages[0].classList.add('active');
    }
});