使用 PHP/MySQL 的动态引导选项卡

Question

所以我已经解决这个问题一段时间了，但我似乎无法让它发挥作用。我的数据库中有一个 category 表和一个 link。我正在尝试将“类别”标题显示为选项卡，将“链接”显示为我的选项卡内容。

让我分享我的代码，我会解释问题：

    <ul class="nav nav-tabs" id="lb-tabs">
  <?php $sqlCat = $db->query('SELECT `tab_title` FROM `category`'); ?>

    <?php 
  foreach ($sqlCat as $row):

      echo '<li><a href="#' . $row['tab_title'] .  '" data-toggle="tab">' .           
      $row['tab_title'] .  ' </a></li>';

  endforeach;

?> 


   </ul>

<div class="tab-content">

    <?php foreach ($sqlCat as $row2): 

    $tab = $row2['tab_title'];?>


    <div class="tab-pane active" id="<?php $row['tab_title']; ?>">

        <div class="links">

            <ul class="col">

                <?php  
                   $items = $db->prepare('SELECT u_links.title, u_links.link, u_links.tid, category.id, category.tab_title 
                   FROM u_links, category 
                   WHERE category.id = u_links.tid 
                   ORDER BY category.id ');
                $items->execute();


                while ($r = $items->fetch(PDO::FETCH_ASSOC)) {
                    echo '<li>' . $r['title'] . '</li>';
                }

                ?>

            </ul>

        </div>

    </div><!-- /tab-pane  -->



<?php endforeach; ?>



 </div>

此当前代码未显示“选项卡内容”div 中的内容。例如，我尝试过不同的方法：

    $tab = '';
    $content = '';
    $link = '';



    $tab_title = null;

    while($row = $items->fetch(PDO::FETCH_ASSOC)) {


  $link = '<li>' . $row['title'] . '</li>';
 if ($tab_title != $row['tab_title']) {

        $tab_title = $row['tab_title'];

    $tab .= '<li><a href="#' . $row['tab_title'] .  '" data-toggle="tab">' .     
        $row['tab_title'] .  ' </a></li>';

    $content .= '<div class="tab-pane active" id="' . $row['tab_title'] .  '"><div  
        class="links"><ul class="col">' . $link . '</ul></div></div><!-- /tab-pane // 
         support -->';


   }



    }

使用此代码，我要么得到太多选项卡（与类别中的项目一样多），而我只想要一个选项卡用于许多项目（链接）。或者我每个部分只会得到一个链接，并且不会从数据库中输出该行。

如果有人可以帮助我解决这个问题，将不胜感激！ :) 谢谢。

Answer 1

好的，所以我认为问题在于您如何设置 .tab-pane id。现在没有“回声”，所以没有任何输出。

我整理了一个工作演示，我确实更改了您的代码的某些部分，但我试图评论一些非常小的内容：

<!-- START OF YOUR CODE -->
    <ul class="nav nav-tabs" id="lb-tabs">
    <?php 
    // I just made an array with some data, since I don't have your data source
        $sqlCat =   array(
                        array('tab_title'=>'Home'),
                        array('tab_title'=>'Profile'),
                        array('tab_title'=>'Messages'),
                        array('tab_title'=>'Settings')
                    );

        //set the current tab to be the first one in the list.... or whatever one you specify
        $current_tab = $sqlCat[0]['tab_title'];
    ?>
    <?php 
    foreach ($sqlCat as $row):
        //set the class to "active" for the active tab.
        $tab_class = ($row['tab_title']==$current_tab) ? 'active' : '' ;
        echo '<li class="'.$tab_class.'"><a href="#' . urlencode($row['tab_title']) .  '" data-toggle="tab">' .           
        $row['tab_title'] .  ' </a></li>';
    endforeach;
    ?>
    </ul><!-- /nav-tabs -->
    <div class="tab-content">
        <?php foreach ($sqlCat as $row2): 
        $tab = $row2['tab_title'];
        //set the class to "active" for the active content.
        $content_class = ($tab==$current_tab) ? 'active' : '' ;
        ?>
        <div class="tab-pane <?php echo $content_class;?>" id="<?php echo $tab; //--  this right here is from yoru code, but there was no "echo" ?>">
            <div class="links">
                <ul class="col">
                    <?php  
                    // Again, I just made an array with some data, since I don't have your data source
                    $items = array(
                                array('title'=>'Home','tab_link'=>'http://home.com'),
                                array('title'=>'Profile','tab_link'=>'http://profile.com'),
                                array('title'=>'Messages','tab_link'=>'http://messages.com'),
                                array('title'=>'Settings','tab_link'=>'http://settings.com'),
                                array('title'=>'Profile','tab_link'=>'http://profile2.com'),
                                array('title'=>'Profile','tab_link'=>'http://profile3.com'),
                            );
                    // you have a while loop here, my array doesn't have a "fetch" method, so I use a foreach loop here        
                    foreach($items as $item) {
              //output the links with the title that matches this content's tab.
              if($item['title'] == $tab){
                            echo '<li>' . $item['title'] . ' - '. $item['tab_link'] .'</li>';
                        }
                    }
                    ?>
                </ul>
            </div>
        </div><!-- /tab-pane  -->
    <?php endforeach; ?>
    </div><!-- /tab-content  -->

<!-- END OF YOUR CODE -->

Answer 2

这对我帮助很大。我有两个用于内容创建的静态选项卡，它们驱动动态选项卡。它肯定还是有点粗糙，但至少这个概念是有效的。

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Clusters</a></li>
    <li><a href="#tab2" data-toggle="tab">Activities</a></li>
    <?php           
        $sql = "<insert query here>";
        $stmt = sqlsrv_query( $conn, $sql );
        if( $stmt === false) {
            die( print_r( sqlsrv_errors(), true) );
        }

        while( $rowtab = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
            $tab_class = ($rowtab['tab_title']==$current_tab) ? 'active' : '' ;
            $nospaces = str_replace(' ', '', $rowtab['tab_title']);
            echo '<li class="'.$tab_class.'"><a href="#' . urlencode($nospaces) .  '" data-toggle="tab">' .
            $rowtab['tab_title'] .  '</a></li>';
        }
        ?>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        Tab1 Content
    </div>
    <div class="tab-pane" id="tab2">
        Tab2 Content
    </div>
    <?php           
        $sql = "<insert query here>";
        $stmt = sqlsrv_query( $conn, $sql );
        if( $stmt === false) {
            die( print_r( sqlsrv_errors(), true) );
            }

            while( $rowtab = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
            $tab = $rowtab['tab_title'];
            $nospaces = str_replace(' ', '', $rowtab['tab_title']);
            $content_class = ($tab==$current_tab) ? 'active' : '' ;
            echo '<div class="tab-pane'. $content_class.'" id="'.$nospaces.'">';
            echo 'You are looking at the '.$tab.' tab. Dynamic content will go here.';
            echo '</div><!-- /.tab-pane -->';
            }
            ?>
</div>

Answer 3

foreach ($files as $file):
    $filename = preg_replace("/\.html$/i", "", $file);
    $title = preg_replace("/\-/i", " ", $filename);
    $documentation = 'usage/'.$type.'/'.$file;
    $tab1 = 'usage/'.$type.'/'.$file;
    echo '<div class="sg-markup sg-section">';
    echo '<div class="sg-display">';
    echo '<h2 class="sg-h2"><a id="sg-'.$filename.'" class="sg-anchor">'.$title.'</a></h2>';


    //TAb Set up
    echo '<div class="row"><div class="col-md-12">';
    echo '<ul class="nav nav-tabs" role="tablist">';
    echo '<li role="presentation" class="active"><a href="#Visual" aria-controls="visual" role="tab" data-toggle="tab">Visual</a></li>';
    echo '<li role="presentation"><a href="#Rules" aria-controls="rules" role="tab" data-toggle="tab">Rules</a></li>';
    echo '</ul>';
    echo '</div>';
    echo '</div>';

    //Visual Tab Content
    echo '<div class="row"><div class="col-md-12">';
    echo '<div class="tab-content">';
    echo '<div role="tabpanel" class="tab-pane active" id="Visual">';
    echo '<h3 class="sg-h3">Visual</h3>';
    include('markup/'.$type.'/'.$file);
    //View Source
    echo '<div class="sg-markup-controls"><a class="btn btn-primary sg-btn sg-btn--source" href="#">View Source</a> <a class="sg-btn--top" href="#top">Back to Top</a> </div>';
    echo '<div class="sg-source sg-animated">';
    echo '<a class="btn btn-default sg-btn sg-btn--select" href="#">Copy Source</a>';
    echo '<pre class="prettyprint linenums"><code>';
    echo htmlspecialchars(file_get_contents('markup/'.$type.'/'.$file));
    echo '</code></pre>';
    echo '</div><!--/.sg-source-->';
    echo '</div>';

    //Documentation Tab Content
    if (file_exists($documentation)) {
        echo '<div role="tabpanel" class="tab-pane" id="Rules">';
        echo '<h3 class="sg-h3">Rules</h3>';
        include($documentation);
        //View Source
        echo '<a class="sg-btn--top" href="#top">Back to Top</a>';
        echo '</div>';
    }


    //Documentation Tab1 Content
    echo '<div role="tabpanel" class="tab-pane" id="Tab1">';
    echo '<h3 class="sg-h3">Tab1</h3>';
    include($tab1);
    echo '<a class="sg-btn--top" href="#top">Back to Top</a>';
    echo '</div>';

    //Documentation Tab2 Content
    echo '<div role="tabpanel" class="tab-pane" id="Tab2">';
    echo '<h3 class="sg-h3">Tab2</h3>';
    // include($tab2);
    echo '<a class="sg-btn--top" href="#top">Back to Top</a>';
    echo '</div>';

    echo '</div>'; //End Tab Content
    echo '</div>'; //End Column
    echo '</div>'; //End Row



    //echo '<div class="row"><div class="col-md-12">';
    //echo '<h3 class="sg-h3">Example</h3>';
    //include('markup/'.$type.'/'.$file);
    //echo '</div>';

     // if (file_exists($documentation)) {
      // echo '<div class="col-md-12"><div class="well sg-doc">';
      // echo '<h3 class="sg-h3">Rules</h3>';
      // include($documentation);
      // echo '</div></div></div>';
    // }
    echo '</div><!--/.sg-display-->';

    //echo '</div><!--/.colmd10-->';
    echo '</div><!--/.sg-section-->';
endforeach;

}