Динамические закладки бутстрапа с использованием PHP/MySQL

Question

Так что я уже давно занимаюсь этой проблемой, и я не могу заставить ее работать. У меня есть Категория таблица и 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> 

Этот текущий код не отображается содержимое в «закладками контента» дел. Я пробовал разные способы, как это, например:

$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-панели. Прямо сейчас нет «эха», поэтому там ничего не выводится.

я собрал рабочую демо, я изменить какую-то часть вашего кода, но очень незначительные вещи, которые я попытался прокомментировать:

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

}