使用php和mysql的动态引导选项卡

时间:2018-02-22 10:56:05

标签: php html twitter-bootstrap-3 tabs

我有Bootstrap模式标签,没有数据循环就可以正常工作。我正在尝试使用来自db(fetch)的数据来填充标签,但是当我更改标签时它无法正常工作,如何在我的标签上调用我所需的标签数据?我知道我有循环问题或者可能是“活动” - 选项卡类。这是我的代码。有什么问题?

<div class="row">
  <div class="col">
	  <div class="row">
		  <div class="col-sm-4">
			  <h4 class="mb-4">Ölkələr</h4>
		  </div>
	  </div>
    <div class="row">
    <?php
    $conn = connect_to_bd();
    mysqli_set_charset($conn,"utf8");
    $selectolke = mysqli_query($conn, "Select t.ID as tid,t.text_az as textaz, c.textid as textid, c.olkeflag as olkeflag, c.id as cid, c.country_az as country_az from countries c, text t where t.id = c.textid");
    while($selectolkerow = mysqli_fetch_array($selectolke))
    {
      $textid = $selectolkerow["textid"];
      $country_az = $selectolkerow["country_az"];
      $olkeflag = $selectolkerow["olkeflag"];
      $olkeid = $selectolkerow["cid"];
      ?>
        <div class="col-lg-4">
          <div class="tabs tabs-vertical tabs-left tabs-navigation">
            <ul class="nav nav-tabs col-sm-3">
              <li class="nav-item active">
                <a class="nav-link" href="#tabsNavigation<?php echo $textid; ?>" data-toggle="tab"><img src="lib/png/<?php echo $olkeflag; ?>.png">  <?php echo $country_az; ?></a>
               </li>
             </ul>
          </div>
         </div>
         <div class="col-lg-8">
           <div class="tab-pane tab-pane-navigation active" id="tabsNavigation<?php echo $textid; ?>">
            <h4><?php echo  header_subname_olke_select_az($olkeid); ?></h4>
            <p class="notworkingcss" style="color: #fff;font-family:Verdana, sans-serifsans-serif;text-shadow: black 1px 1px 2px;font-size: 1.2em;">
            <?php echo text_olke_select_az($textid, $olkeid); ?>
            </p>
            <div class="row portfolio-list lightbox m-0" data-plugin-options="{'delegate': 'a.lightbox-portfolio', 'type': 'image', 'gallery': {'enabled': true}}">
              <div class="col-12 col-sm-6 col-lg-3">
                <div class="portfolio-item">
                  <span class="thumb-info thumb-info-lighten thumb-info-centered-icons">
                    <span class="thumb-info-wrapper">
                      <img src="img/products/yerli/1.jpg" class="img-fluid" alt="Et mehsullari">
                      <span class="thumb-info-action">
                        <a href="img/products/yerli/1.jpg" class="lightbox-portfolio">
                        <span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fa fa-search-plus"></i></span>
                        </a>
                      </span>
                    </span>
                   </span>
                  </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3">
                  <div class="portfolio-item">
                    <span class="thumb-info thumb-info-lighten thumb-info-centered-icons">
                      <span class="thumb-info-wrapper">
                        <img src="img/products/yerli/2.jpg" class="img-fluid" alt="Et mehsullari">
                        <span class="thumb-info-action">
                          <a href="img/products/yerli/2.jpg" class="lightbox-portfolio">
                          <span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fa fa-search-plus"></i></span>
                          </a>
                        </span>
                      </span>
                    </span>
                   </div>
                  </div>
                 <div class="col-12 col-sm-6 col-lg-3">
                  <div class="portfolio-item">
                    <span class="thumb-info thumb-info-lighten thumb-info-centered-icons">
                      <span class="thumb-info-wrapper">
                      <img src="img/products/yerli/3.jpg" class="img-fluid" alt="Et mehsullari">
                      <span class="thumb-info-action">
                        <a href="img/products/yerli/3.jpg" class="lightbox-portfolio">
	                      <span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fa fa-search-plus"></i></span>
                        </a>
                       </span>
										  </span>
									  </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
      <?php
      }
      ?>
    </div>
  </div>
</div>

0 个答案:

没有答案