动态生成带数据库驱动的PHP选项卡系统-php教程-PHP中文网

动态生成带数据库驱动的PHP选项卡系统

本文介绍如何使用php结合mysql动态生成选项卡（tabs），使每个选项卡点击后精准显示对应日期的午餐与晚餐时间，解决id重复导致内容错乱的问题。

本文介绍如何使用php结合mysql动态生成选项卡（tabs），使每个选项卡点击后精准显示对应日期的午餐与晚餐时间，解决id重复导致内容错乱的问题。

在构建餐厅营业时间展示页面时，常见的需求是：以星期几（如“lunedi”“martedi”）作为选项卡标题，点击任一选项卡后，仅显示该日对应的 pranzo（午餐）和 cena（晚餐）时间。你当前的代码存在两个关键问题：所有标签页共用同一 href="#tab-nine1" 和 id="tab-nine1"，导致Bootstrap无法区分不同内容；同时，内容区始终只查询首条记录（LIMIT 1），未按选中日期动态过滤。

要实现真正的“动态选项卡”，需满足三个核心原则：
✅ 每个的 href 值必须唯一且可映射到对应内容区块；
✅ 每个 .tab-pane 的 id 必须与之严格匹配；
✅ 内容区块中的SQL查询需根据当前选项卡所代表的日期（如 giorno = 'lunedi'）精确筛选数据。

以下是优化后的完整实现（已适配现代PHP与MySQLi，*彻底弃用已废弃的 `mysql_` 函数**）：

<section class="big-section bg-light-gray border-top border-color-medium-gray wow animate__fadeIn"><div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12 text-center margin-six-bottom">
                <h6 class="alt-font text-extra-dark-gray font-weight-500">Orari</h6>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10 tab-style-05">
                <div class="tab-box">
                    <!-- Tab Navigation -->
                    <ul class="nav nav-tabs margin-7-rem-bottom md-margin-5-rem-bottom xs-margin-15px-lr align-items-center justify-content-center font-weight-500 text-uppercase">
<?php // 使用 MySQLi 安全连接（请替换为你的实际配置）
                        $conn = new mysqli("localhost", "username", "password", "database_name");
                        if ($conn->connect_error) die("Connessione fallita: " . $conn->connect_error);

                        $sql_tabs = "SELECT id, giorno FROM orari_ristorante ORDER BY FIELD(giorno, 'lunedi','martedi','mercoledi','giovedi','venerdi')";
                        $result_tabs = $conn->query($sql_tabs);
                        $active = true;

                        while ($row = $result_tabs->fetch_assoc()) {
                            $tab_id = "tab-" . $row['id'];
                            $class = $active ? 'nav-link active' : 'nav-link';
                            echo '<li class="nav-item alt-font"><a class="' . $class . '" href="#'%20.%20%24tab_id%20.%20'" data-toggle="tab">' . ucfirst($row['giorno']) . '</a></li>';
                            $active = false;
                        }
                        ?>
                    </ul>
<!-- End Tab Navigation --><!-- Tab Content --><div class="tab-content">
                        <?php // 重新查询所有数据，为每个选项卡生成独立内容块
                        $sql_content = "SELECT id, giorno, pranzo, cena FROM orari_ristorante ORDER BY FIELD(giorno, 'lunedi','martedi','mercoledi','giovedi','venerdi')";
                        $result_content = $conn->query($sql_content);
                        $active = true;

                        while ($row = $result_content->fetch_assoc()) {
                            $tab_id = "tab-" . $row['id'];
                            $class = $active ? 'tab-pane med-text fade in active show' : 'tab-pane med-text fade';
                            echo '<div class="' . $class . '" id="' . $tab_id . '">';
                            echo '<div class="panel-group accordion-event accordion-style-04" id="accordion-' . $row['id'] . '" data-active-icon="icon-feather-minus" data-inactive-icon="icon-feather-plus">';
                            echo '<div class="panel border-color-black-transparent">';
                            echo '<div class="panel-heading">';
                            echo '<span class="panel-time">Pranzo</span>';
                            echo '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-' . $row['id'] . '">';
                            echo '<div class="panel-title"><span class="text-extra-dark-gray d-inline-block font-weight-500">' . $row['pranzo'] . '</span></div>';
                            echo '</a>';
                            echo '<a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class="prenota">PRENOTA</span></a>';

                            echo '<span class="panel-time">Cena</span>';
                            echo '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-' . $row['id'] . '">';
                            echo '<div class="panel-title"><span class="text-extra-dark-gray d-inline-block font-weight-500">' . $row['cena'] . '</span></div>';
                            echo '</a>';
                            echo '<a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class="prenota">PRENOTA</span></a>';
                            echo '</div>
</div>
</div>
</div>';
                            $active = false;
                        }
                        $conn->close();
                        ?>
                    </div>
                    <!-- End Tab Content -->
                </div>
            </div>
        </div>
    </div>
</section>

? 关键改进说明：

btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

✅ 唯一标识符驱动：使用数据库自增主键 id 生成动态 tab-1, tab-2 等ID，确保HTML锚点与内容区块一一对应；
✅ 语义化顺序：通过 ORDER BY FIELD(...) 保证周一至周五按业务逻辑排序（非字母序）；
✅ 安全性升级：采用 mysqli 替代已被PHP 7.0+ 移除的 mysql_* 扩展，并显式关闭连接；
✅ 结构解耦：导航栏与内容区分别独立循环，避免混淆数据上下文；
✅ 可扩展性：若未来需支持AJAX加载，只需将 .tab-pane 内容替换为 data-day="" 并绑定JS事件即可。

⚠️ 注意事项：

确保数据库表 orari_ristorante 中存在 id（INT PRIMARY KEY AUTO_INCREMENT）字段；
若无 id 字段，请先添加：ALTER TABLE orari_ristorante ADD COLUMN id INT PRIMARY KEY AUTO_INCREMENT FIRST;；
Bootstrap 4/5 的 data-toggle="tab" 依赖jQuery及Bootstrap JS，务必引入对应资源；
生产环境应使用PDO预处理语句防止SQL注入（本例为简化演示，假设输入可信）。

通过以上重构，每个选项卡将精准响应其对应日期的数据，彻底解决“所有Tab显示同一行”的问题，同时为后续功能扩展（如预约表单联动、响应式适配）奠定坚实基础。