使用PHP/MySQL的动态引导选项卡 [英] Dynamic Bootstrap Tabs using PHP/MySQL

问题描述

所以我已经解决这个问题已有一段时间了，我似乎无法使它正常工作.我的数据库中有一个类别表和一个链接.我试图将类别"标题显示为选项卡，将链接"显示为我的选项卡内容.

So I've been tackling this problem for a while now and I can't seem to get it to work. I have a category table and a link in my database. I'm trying to display the "category" title as the tab and the "link" as my tab content.

让我分享我的代码，我将说明问题:

Let me share my code and I'll explain the problem:

    <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" div中显示内容.例如，我尝试了不同的方法:

This current code is not displaying the content in the "tab-content" div. I've tried different ways like this for example:

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


   }



    }

使用此代码，我要么获得了太多的标签(类别中的许多项目)，要么我只希望为多个项目(链接)提供一个标签.否则我每节只会得到一个链接，而不会从数据库中输出该行.

With this code I either get as too many tabs(as many items within the category) which I only want one tab for many items(links). Or I'll only get one link per section and doesn't output that row from the database.

如果有人可以帮助我，将不胜感激！ :)谢谢.

If anyone can help me out with this, it will be much appreciated! :) Thank you.

推荐答案

好，所以我认为问题在于您如何设置.tab窗格ID.现在没有回声"，因此没有任何输出.

Ok, so I think the issue is how you set your .tab-pane id's. Right now there is but no "echo" so nothing is being output there.

我整理了一个有效的演示，我确实更改了您的代码的一部分，但是我尝试注释的非常小的内容:

I put together a working demo, I did change some part of your code, but very minor stuff which I tried to comment:

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

这篇关于使用PHP/MySQL的动态引导选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！