如何实现侧边栏点击不新建标签/刷新页面加载petugas.php内容

以下是针对需求的完整修改代码及说明：

<?php 
    session_start();
    if (isset($_SESSION['id']) && isset($_SESSION['username'])) {

?>
<!DOCTYPE html>
<html>
    <head>
        <title>Dashboard</title>
        <link rel="stylesheet" type="text/css" href="dashboard.css">
        <script src="https://kit.fontawesome.com/463f6f67c2.js" crossorigin="anonymous"></script>
        <style>
            /* 基础布局样式，让侧边栏和主内容区横向排列 */
            .wrapper {
                display: flex;
                gap: 20px;
            }
            .main-content {
                flex: 1;
                padding: 20px;
                border-left: 1px solid #eee;
            }
        </style>
    </head>
    <body class="dashboard">
<h1>Halo,<?php echo $_SESSION['name']; ?></h1>

<div class="wrapper">
    <div class="sidebar">
    <h2>Sidebar</h2>

    <ul><!--sidebar list-->
        <li><a href="#" id="home"><i class="fa-solid fa-house-user"></i>Home</a></li>
        <li><a href="#" id="data-petugas"><i class="fa-solid fa-user-tie"></i>Data Petugas</a></li>
        <li><a href="#" id="kelas"><i class="fa-solid fa-users-rectangle"></i>Data Kelas</a></li>
        <li><a href="#" id="siswa"><i class="fa-solid fa-money-check"></i>Data Siswa</a></li>
        <li><a href="#" id="history pembayaran"><i class="fa-solid fa-clock"></i>History Pembayaran</a></li>
    </ul>
    </div>
    <!-- 新增主内容容器，用于加载petugas.php的内容 -->
    <div class="main-content" id="main-content"></div>
</div>
<a href="logout.php">Logout</a>

<script>
// 获取链接和内容容器元素
const petugasLink = document.getElementById('data-petugas');
const mainContent = document.getElementById('main-content');

// 绑定点击事件
petugasLink.addEventListener('click', function(e) {
    // 阻止默认跳转行为
    e.preventDefault();
    
    // 异步加载petugas.php内容
    fetch('petugas.php')
        .then(response => {
            if (!response.ok) throw new Error('页面加载失败');
            return response.text();
        })
        .then(html => {
            // 将加载的内容插入到主容器中
            mainContent.innerHTML = html;
        })
        .catch(error => {
            // 加载失败时提示错误
            mainContent.innerHTML = `<p>出错了：${error.message}</p>`;
        });
});
</script>
    </body>
</html>

<?php
    }else{
        header("Location: index.php");
        exit();
    }
?>

核心改动说明 #

• 新增主内容容器：在wrapper内添加了<div class="main-content" id="main-content"></div>，作为petugas.php内容的专属展示区域，同时通过基础CSS实现侧边栏与主内容区的横向布局。
• 调整链接属性：移除「Data Petugas」链接的target="main_body"属性，将href改为#并添加唯一ID，避免触发默认跳转行为，方便绑定自定义事件。
• 实现无刷新加载：用原生JavaScript监听链接点击事件，通过fetch API异步请求petugas.php的HTML内容，将返回结果插入到主内容容器中，同时处理请求失败的异常情况。

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