Question

我能够为Bootstrap 3中的每个选项卡生成动态表内容，但是当我切换到Bootstrap 4时，由于某些原因，切换选项卡时选项卡的内容不会更改。第一个选项卡的内容在所有选项卡中均保持不变。

这让我感到困惑的主要原因是，当我查看已加载页面的元素时，代码会正确加载。当我切换标签时，它根本不会定位ID并加载新数据。我尝试在初始加载时在不同选项卡上设置“活动”，也尝试过不同的“淡入”和“淡入显示”，但无济于事。任何帮助将不胜感激

    //count is only used to set the initial tab to active. 
    $count = 0;
    //$sched_array is an array with a time array (description, length) and ID saved inside a date array. 
    foreach($sched_array as $date => $time){

        $ID = $time['ID'];
        if($count == 0){
                $tab_menu .= '
                    <li class = "nav-item"><a class = "nav-link active"  data-toggle="tab" href="#'. htmlstr($ID) . '"> '. $date .' </a></li>
                ';
                $tab_content .= '<div id = "'.$ID.'" class = "tab-pane active">
                                ';
        }
        else{
                $tab_menu .= '
                    <li class = "nav-item">
                        <a class = "nav-link" data-toggle="tab" href="#'.$ID. '"> ' . $date . '</a>
                    </li>
                ';
                $tab_content .= '<div id = "'.$ID.'" class = "tab-pane fade" >
                                ';
        }
        $time_array = array_shift($time);

        //load the actual content for the table

        $tab_content .='
                <table class = "table table-dark table-striped">
                    <thead class = "thead-dark">
                        <tr>
                            <th scope = "col"> Start Time </th>
                            <th scope = "col"> Session </th>
                            <th scope = "col"> Length (minutes)  </th>
                        </tr>
                    </thead>
                <tbody>
        ';

        foreach($time as $index => $key){

            $desc = $key['description'];
            $leng = $key['length'];

            $tab_content .= '
                    <tr>
                        <td> '.$index.' </td>
                        <td>'.$desc.'</td>
                        <td>'.$leng.'</td>
                    </tr>
            ';
        }
        $tab_content .= '</tbody> </table> </div>';
        $count++;
    }

加载php的html代码如下所示：

<html>
    <body>
        <section id="main">
                <input type = "hidden" name="id" value="<?php echo sanitize_id($_GET['id']); ?>">
                <input type = "hidden" name="action">
                <input type = "hidden" name="sequence">

                <ul class="nav nav-tabs role = "tablist">
                    <?php echo $tab_menu?>
                </ul>
                <div class = "tab-content">
                    <?php echo $tab_content?>
                </div>
        </section>
    </body>
</html>

在Bootstrap 4中显示动态标签内容时出错

0 个答案: