如何在PHP页面实现带垂直弹出菜单的HTML选项卡布局

结构修改（welcome.php） #

你现有代码的侧边栏、管理员头部模块不需要改动，只需要替换空的<div class="info"></div>区块，补全缺失的页面闭合标签，再加交互逻辑即可。

1. 替换main_content区块内的info部分，加入选项卡导航、下拉菜单、内容容器：

<div class="main_content">
    <?php include "adminHeader.php"; ?>
    <!-- 选项卡导航 -->
    <div class="tab-nav">
        <button class="tab-btn active" data-target="mainview">Mainview</button>
        <div class="tab-dropdown">
            <button class="tab-btn" data-toggle="dropdown">Details1</button>
            <ul class="dropdown-menu hidden">
                <li class="dropdown-item" data-target="d1-item1">item1</li>
                <li class="dropdown-item" data-target="d1-item2">item2</li>
                <li class="dropdown-item" data-target="d1-item3">item3</li>
            </ul>
        </div>
        <div class="tab-dropdown">
            <button class="tab-btn" data-toggle="dropdown">Details2</button>
            <ul class="dropdown-menu hidden">
                <li class="dropdown-item" data-target="d2-item1">item1</li>
                <li class="dropdown-item" data-target="d2-item2">item2</li>
                <li class="dropdown-item" data-target="d2-item3">item3</li>
            </ul>
        </div>
    </div>
    <!-- 内容展示区 -->
    <div class="info">
        <div class="tab-content">
            <div class="tab-pane active" id="mainview">
                <!-- 此处替换为Mainview实际业务内容 -->
                <h3>主视图</h3>
                <p>页面初始加载默认展示该区域内容</p>
            </div>
            <div class="tab-pane hidden" id="d1-item1">Details1-item1 对应内容</div>
            <div class="tab-pane hidden" id="d1-item2">Details1-item2 对应内容</div>
            <div class="tab-pane hidden" id="d1-item3">Details1-item3 对应内容</div>
            <div class="tab-pane hidden" id="d2-item1">Details2-item1 对应内容</div>
            <div class="tab-pane hidden" id="d2-item2">Details2-item2 对应内容</div>
            <div class="tab-pane hidden" id="d2-item3">Details2-item3 对应内容</div>
        </div>
    </div>
</div>

2. 在wrapper容器结束标签后，补全</body></html>标签，在标签前加入交互JS代码（复用你已引入的jQuery，不需要额外引入依赖）：

<script>
$(function(){
    // Mainview选项卡点击切换
    $('.tab-btn[data-target]').on('click', function(){
        $('.dropdown-menu').addClass('hidden');
        $('.tab-btn').removeClass('active');
        $(this).addClass('active');
        $('.tab-pane').addClass('hidden');
        $('#' + $(this).data('target')).removeClass('hidden');
    })

    // Details类选项卡点击切换下拉菜单显示
    $('.tab-btn[data-toggle="dropdown"]').on('click', function(e){
        e.stopPropagation();
        $('.dropdown-menu').not($(this).siblings('.dropdown-menu')).addClass('hidden');
        $(this).siblings('.dropdown-menu').toggleClass('hidden');
        $('.tab-btn').not($(this)).removeClass('active');
        $(this).addClass('active');
    })

    // 下拉菜单项点击加载对应内容
    $('.dropdown-item').on('click', function(){
        $('.dropdown-menu').addClass('hidden');
        $('.tab-pane').addClass('hidden');
        $('#' + $(this).data('target')).removeClass('hidden');
    })

    // 点击页面空白区域自动收起所有下拉菜单
    $(document).on('click', function(){
        $('.dropdown-menu').addClass('hidden');
    })
})
</script>

样式追加（styles.css） #

把以下代码追加到你现有CSS文件末尾即可，配色和你现有紫色侧边栏主题做了适配，复用了你已经定义的.hidden类：

/* 选项卡导航栏 */
.tab-nav {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #e0e4e8;
    padding: 0 20px;
}
.tab-btn {
    border: none;
    background: transparent;
    padding: 15px 20px;
    font-size: 15px;
    color: #717171;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}
.tab-btn.active {
    color: #4b4276;
    border-bottom-color: #4b4276;
    font-weight: 600;
}
.tab-btn:hover {
    background: #f3f5f9;
}
/* 下拉菜单容器 */
.tab-dropdown {
    position: relative;
}
/* 垂直下拉菜单 */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 0 0 4px 4px;
    z-index: 999;
    margin: 0;
    padding: 5px 0;
}
.dropdown-item {
    padding: 10px 20px;
    color: #717171;
    cursor: pointer;
    font-size: 14px;
}
.dropdown-item:hover {
    background: #f3f5f9;
    color: #4b4276;
}
/* 内容区 */
.tab-content {
    background: #fff;
    padding: 25px;
    border-radius: 4px;
    min-height: 450px;
}
.tab-pane {
    line-height: 25px;
    color: #717171;
}

调整说明 #

• 新增菜单项时，只需要在对应dropdown-menu列表中加<li class="dropdown-item" data-target="自定义id">菜单名</li>，同时在tab-content中加对应id的<div class="tab-pane hidden" id="自定义id">对应内容</div>即可
• 初始默认展示Mainview内容，所有切换逻辑无刷新，点击页面空白区域会自动收起展开的下拉菜单
• 代码和你已引入的Bootstrap、Font Awesome无冲突，不需要修改原有侧边栏、头部模块的代码

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