使用LINKS更新页面内容：实现单页面标签切换仅更新主体区域

嘿，我来帮你搞定这个单页标签切换的需求！不用跳转到新页面，点击标签直接更新主体内容，看下面的实现方案就行：

首先咱们得调整HTML结构，把原来的跳转链接改成触发内容切换的导航项，同时给主体内容区准备好不同的内容模块：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body bgcolor="white" id="body">
    <header class="head">
        <!-- 把原来的跳转链接改成点击触发切换的导航按钮 -->
        <nav class="tab-nav">
            <button class="tab-btn active" data-tab="home">Home</button>
            <button class="tab-btn" data-tab="contact">Contact</button>
            <button class="tab-btn" data-tab="about">About</button>
            <!-- 可以按需添加更多标签 -->
        </nav>
        <img src="C:\Users\HP\Desktop\HTML web\ProfilePhoto.jpg" style="/* 保留你原来的图片样式 */">
    </header>

    <!-- 主体内容容器，存放各个标签对应的内容 -->
    <main class="tab-content-container">
        <!-- Home内容 -->
        <div class="tab-content active" id="home-content">
            <h2>欢迎来到首页</h2>
            <p>这里是首页的专属内容...</p>
        </div>

        <!-- Contact内容（包含联系信息表格） -->
        <div class="tab-content" id="contact-content">
            <h2>联系我们</h2>
            <table border="1">
                <tr>
                    <th>联系方式</th>
                    <th>详情</th>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td>contact@example.com</td>
                </tr>
                <tr>
                    <td>电话</td>
                    <td>123-456-7890</td>
                </tr>
            </table>
        </div>

        <!-- About内容 -->
        <div class="tab-content" id="about-content">
            <h2>关于我们</h2>
            <p>这里是关于页面的介绍内容...</p>
        </div>
    </main>

    <script>
        // 把JS逻辑直接写在这里也可以，不用单独建文件
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');

        tabBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // 切换标签按钮的高亮状态
                tabBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                // 切换对应内容的显示状态
                const tabId = btn.getAttribute('data-tab');
                tabContents.forEach(content => content.classList.remove('active'));
                document.getElementById(`${tabId}-content`).classList.add('active');
            });
        });
    </script>
</body>
</html>

样式调整（1.css） #

给标签按钮和内容区加样式，让选中的标签高亮，未选中的内容隐藏：

/* 导航标签样式 */
.tab-nav {
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    background-color: #eee;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px 4px 0 0;
    transition: background-color 0.2s;
}

.tab-btn:hover {
    background-color: #ddd;
}

.tab-btn.active {
    background-color: #fff;
    border-bottom: 2px solid #007bff;
    font-weight: bold;
}

/* 内容区样式 */
.tab-content-container {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 0 4px 4px 4px;
}

.tab-content {
    display: none; /* 默认隐藏所有内容 */
}

.tab-content.active {
    display: block; /* 显示选中的内容 */
}

小提示 #

• 你原来的图片是本地绝对路径，上线的时候记得改成相对路径或者服务器上的路径哦
• 可以根据自己的喜好修改样式，比如换颜色、调整间距、改按钮形状这些
• 如果内容比较多，也可以用AJAX动态加载内容，但上面的方案适合内容固定的场景

内容的提问来源于stack exchange，提问作者Gowtham Sarathy