PHP/MySQL을 사용하는 동적 부트 스트랩 탭

Question

그래서이 문제에 대해 지금 당장 다루어 왔으며 제대로 작동하지 않는 것 같습니다. 나는 카테고리 테이블과 링크 내 데이터베이스에 있습니다. 나는 "카테고리"타이틀을 탭으로 표시하고 "링크"를 탭 컨텐츠로 표시하려고합니다.

는 내 코드를 공유하자 나는 문제를 설명 할 것이다 :이 현재 코드가 "탭 내용"DIV의 내용을 표시하지 않습니다

<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를 설정하는 방법입니다. 지금은 "echo"가 없으므로 아무 것도 출력되지 않습니다. 내가 함께 작업 데모를 넣어

, 나는 코드의 일부를 변경했지만 내가 언급하려 아주 사소한 물건 :

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

}