html导航栏iframe：使用HTML导航栏与iframe实现单页多内容展示

来源：网络作者：日期：2025-11-02 20:04:24

什么是iframe？

iframe（Inline Frame）是HTML5中的一种元素，用于在一个文档中嵌入另一个文档，它允许你在当前页面中显示来自其他来源的HTML、CSS或JavaScript内容，iframe通常用于嵌入外部网站、视频、地图或其他多媒体内容。

为什么使用iframe？

隔离：iframe中的内容与主页面完全隔离，避免脚本冲突。 2. 动态加载：通过导航栏切换iframe中的内容，实现单页应用（SPA）的效果。 3. 用户体验优化**：无需页面刷新即可切换内容,提升用户体验。

html导航栏iframe：使用HTML导航栏与iframe实现单页多内容展示

实现步骤

创建HTML导航栏

我们需要创建一个导航栏，包含多个链接,用于切换iframe中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Iframe Navigation Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .navbar {
            background-color: #333;
            overflow: hidden;
        }
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
        .content {
            padding: 20px;
            display: none;
        }
        .content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#" onclick="loadContent('home')">首页</a>
        <a href="#" onclick="loadContent('about')">关于我们</a>
        <a href="#" onclick="loadContent('services')">服务</a>
        <a href="#" onclick="loadContent('contact')">联系我们</a>
    </div>
    <div class="content active" id="home">
        <iframe src="home.html" width="100%" height="600px"></iframe>
    </div>
    <div class="content" id="about">
        <iframe src="about.html" width="100%" height="600px"></iframe>
    </div>
    <div class="content" id="services">
        <iframe src="services.html" width="100%" height="600px"></iframe>
    </div>
    <div class="content" id="contact">
        <iframe src="contact.html" width="100%" height="600px"></iframe>
    </div>
    <script>
        function loadContent(contentId) {
            // 隐藏所有内容
            var contents = document.getElementsByClassName("content");
            for (var i = 0; i < contents.length; i++) {
                contents[i].classList.remove("active");
            }
            // 显示选中的内容
            document.getElementById(contentId).classList.add("active");
        }
    </script>
</body>
</html>