使用PHP/MySQL的Dynamic Bootstrap選項卡

Question

所以我現在已經解決了這個問題一段時間了，我似乎無法使它工作。我有一個類別表和一個鏈接在我的數據庫。我試圖將「類別」標題顯示爲標籤，將「鏈接」顯示爲我的標籤內容。

讓我分享我的代碼，我會解釋這個問題：

<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> 

這個當前的代碼並不顯示在「標籤內容」分區的內容。我已經試過這樣的不同的方法，例如：

$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; 

}