使用 php 的动态选项卡

Question

大家好，我是 php 中的 niubbie。我的选项卡有问题。我希望他们点击的标签显示不同的主题。所有这些都使用 php 并调用 db。

我的数据库：

giorno	pranzo	cena
lunedi	12:00	20:00
martedi	12:00	20:00
mercoledi	12:00	20:00
giovedi	12:00	20:00
venerdi	12:00	20:00

日期由选项卡表示，当我点击不同的日期时，我希望它显示该特定日期的午餐和晚餐。

我的代码：

 <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">
                   
                        <!-- start 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 
                                $sql = "SELECT * FROM orari_ristorante ";
                                $risultato = mysql_query($sql) or die(mysql_error()."<br>Impossibile eseguire l'interrogazione");
                                $i=0;
                                while ($riga = mysql_fetch_assoc($risultato)){  
                        ?>
                        <?php if($i == 0){?>

                        <li class="nav-item alt-font"><a class="nav-link active" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>
                        <?php }else{?>  
                        <li class="nav-item alt-font"><a class="nav-link" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>

                        <?php }
                            $i++;
                            }?>    
                        </ul>
                        <!-- end tab navigation -->
                    </div>
                    <div class="tab-content">
                        <!-- start tab content -->
                        <div class="tab-pane med-text fade in active show" id="tab-nine1">
                            <div class="panel-group accordion-event accordion-style-04" id="accordion1" data-active-icon="icon-feather-minus" data-inactive-icon="icon-feather-plus">
                                <!-- start accordion item -->
                               
                                
                                <div class="panel border-color-black-transparent">
                                    <div class="panel-heading">
                               
                                <?php 

                                    $sql = "SELECT pranzo,cena FROM orari_ristorante LIMIT 1";
                                    $risultato = mysql_query($sql) or die(mysql_error()."<br>Impossibile eseguire l'interrogazione");
                                    
                                    while ($riga = mysql_fetch_assoc($risultato)){ 
                                    ?>
                                        <span class="panel-time">Pranzo</span>
                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
                                            <div class="panel-title">
                                                <span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['pranzo'] ;?></span>
                                                
                                            </div>
                                            
                                        </a>
                                        <a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class='prenota'>PRENOTA</span></a>

                                        <span class="panel-time">Cena</span>
                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
                                            <div class="panel-title">
                                                <span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['cena'] ;?></span>
                                                
                                            </div>
                                            
                                        </a>
                                        
                                        <a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class='prenota'>PRENOTA</span></a>
                                        <?php 
                                        }
                                        
                                    ?>  
                                
                                    </div>
                                    
                                </div>
                                 
                                
                            </div>
                            
                        </div>
                        <!-- end tab content -->
                    </div>
                </div>       
            </div>
        </div>
    </section>

我的问题是每个选项卡都显示所有行而不是当天的特定行

My Problem

Answer 1

您需要确保为您的内容使用唯一 ID，并在标签的 href 中使用它们。

阅读您的代码，看起来每个选项卡都是使用相同的 ID 创建的 <li class="nav-item alt-font"><a class="nav-link active" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>

我会从数据库中回显出唯一的 ID，例如。

href="#tab-<?echo $riga['id'];?>"（或任何你独特的列标题）

确保在创建选项卡内容时也将其回显到更下方。

Answer 2

根据您要完成的任务，如果您将结果限制为一个，您将始终只在数据库中显示第一天。这是我将如何更改您的第二个 while 循环的方法。

<?php
$sql = "SELECT * FROM orari_ristorante";
$risultato = mysqli_query($conn, $sql);
$i = 0;
while ($riga = mysqli_fetch_assoc($risultato)){
  if($i == 0){
    $css = ""
  }else{
    $css = "display:none"
  }
?>
  <div class="giorno_tab <?php echo $riga['giorno'] ;?>" style="<?php echo $css ;?>">; 
    <span class="panel-time">Pranzo</span>
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
        <div class="panel-title">
            <span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['pranzo'] ;?></span>

        </div>

    </a>
    <a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class='prenota'>PRENOTA</span></a>

    <span class="panel-time">Cena</span>
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
        <div class="panel-title">
            <span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['cena'] ;?></span>

        </div>

    </a>

    <a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class='prenota'>PRENOTA</span></a>
  </div>
    <?php

    $i++;}

?>

</div>

这不是解决方案，但是您可以在此基础上构建您想要做的事情。希望这会有所帮助。

只是为了解释一下，我在课程中添加了 $riga["giorno"] 作为一种 ID，但是 Revbo 的答案会在涉及 ID 时给出更清晰的代码