Nav pills bringing mysql information in Pdo

Question

<div class="video-sec">
  <h4 class="heading-small">Mídias</h4>
  <div class="video-block">
  <ul class="nav nav-pills justify-content-center mb-4" id="pills-nav" role="tablist">      
  <?php
  // Atribui uma conexão PDO
  $conexao = Connection::getInstance();

  $controle_ativo = 2;
  //$controle_num_slide = 1;
  $sql = "SELECT * FROM db_post WHERE status=1 AND category='Mídia' ORDER BY created DESC LIMIT 3";

  $stm = $conexao->prepare($sql);
  $stm->execute();

  while($post = $stm->fetch(PDO::FETCH_OBJ)) {
    if($controle_ativo == 2) { ?>
      <li class="nav-item">
        <a class="nav-link active" id="nav-pills-01" data-toggle="pill" href="#<?=$post->post_id?>"><?=$post->title?></a>
      </li>
    <?php
      $controle_ativo = 1;
    } else {
    ?>
      <li class="nav-item">
        <a class="nav-link" id="nav-pills-02" data-toggle="pill" href="#<?=$post->post_id?>"><?=$post->title?></a>
      </li>
    <?php
      //$controle_num_slide++;
    }
  }
  ?>
</ul>
<div class="tab-content" id="nav-pills-content">      
  <?php
  // Atribui uma conexão PDO
  $conexao = Connection::getInstance();

  $controle_ativo = 2;
  $sql = "SELECT * FROM db_post WHERE status=1 AND category='Mídia' ORDER BY created DESC LIMIT 3";

  $stm = $conexao->prepare($sql);
  $stm->execute();

  while($post = $stm->fetch(PDO::FETCH_OBJ)) {
    if($controle_ativo == 2) { ?>
  <div class="tab-pane fade show active" id="<?=$post->post_id?>" role="tabpanel">
    <div class="row">
      <div class="col-sm-6">
        <div class="embed-responsive embed-responsive-16by9"> <!-- 21by9, 16by9, 4by3, 1by1 -->
          <iframe class="embed-responsive-item" src="<?=$post->url?>"></iframe>
        </div>
      </div>
      <div class="col-sm-6">
        <p class="display-5"><?=$post->content?></p>
        <p class="card-text">
          <small class="text-time">
            <em>Publicado em <?=date('M,d',strtotime($post->created))?></em>
          </small>
        </p>
      </div>
    </div>
  </div>
    <?php
      $controle_ativo = 1;
    } else {
    ?>
  <div class="tab-pane fade" id="<?=$post->post_id?>a" role="tabpanel">
    <div class="row">
      <div class="col-sm-6">
        <div class="embed-responsive embed-responsive-16by9"> <!-- 21by9, 16by9, 4by3, 1by1 -->
          <iframe class="embed-responsive-item" src="<?=$post->url?>"></iframe>
        </div>
      </div>
      <div class="col-sm-6">
        <p class="display-5"><?=$post->content?></p>
        <p class="card-text">
          <small class="text-time">
            <em>Publicado em <?=date('M,d',strtotime($post->created))?></em>
          </small>
        </p>
      </div>
    </div>
  </div>
    <?php
    }
  }
  ?>
</div>

There is active tab is perfect when I click on the second or third tab nothing happens (does not open), I have to leave dynamic. I still ask is there a way with javascript to enable the tab and its content.

Answer 1

<div class="video-sec">
  <h4 class="heading-small">Mídias</h4>
  <div class="video-block">
    <ul class="nav nav-pills justify-content-center mb-4" id="pills-nav" role="tablist">      
  <?php
  // Atribui uma conexão PDO
  $conexao = Connection::getInstance();

  $controle_ativo = 2;
  $sql = "SELECT * FROM db_post WHERE status=1 AND category='Mídia' ORDER BY created DESC LIMIT 3";

  $stm = $conexao->prepare($sql);
  $stm->execute();

  while($post = $stm->fetch(PDO::FETCH_OBJ)) {
    if($controle_ativo == 2) { ?>
      <li class="nav-item">
        <a class="nav-link active" id="nav-pills-01" data-toggle="pill" href="#**navtabs**<?=$post->post_id?>"><?=$post->title?></a>
      </li>
    <?php
      $controle_ativo = 1;
    } else {
    ?>
      <li class="nav-item">
        <a class="nav-link" id="nav-pills-02" data-toggle="pill" href="#**navtabs**<?=$post->post_id?>"><?=$post->title?></a>
      </li>
    <?php
    }
  }
  ?>
</ul>
<div class="tab-content" id="nav-pills-content">      
  <?php
  // Atribui uma conexão PDO
  $conexao = Connection::getInstance();

  $controle_ativo = 2;
  $sql = "SELECT * FROM db_post WHERE status=1 AND category='Mídia' ORDER BY created DESC LIMIT 3";

  $stm = $conexao->prepare($sql);
  $stm->execute();

  while($post = $stm->fetch(PDO::FETCH_OBJ)) {
    if($controle_ativo == 2) { ?>
  <div class="tab-pane fade show active" id="**navtabs**<?=$post->post_id?>" role="tabpanel">
    <div class="row">
      <div class="col-sm-6">
        <div class="embed-responsive embed-responsive-16by9"> <!-- 21by9, 16by9, 4by3, 1by1 -->
          <iframe class="embed-responsive-item" src="<?=$post->url?>"></iframe>
        </div>
      </div>
      <div class="col-sm-6">
        <p class="display-5"><?=$post->content?></p>
        <p class="card-text">
          <small class="text-time">
            <em>Publicado em <?=date('M,d',strtotime($post->created))?></em>
          </small>
        </p>
      </div>
    </div>
  </div>
    <?php
      $controle_ativo = 1;
    } else {
    ?>
  <div class="tab-pane fade" id="**navtabs**<?=$post->post_id?>" role="tabpanel">
    <div class="row">
      <div class="col-sm-6">
        <div class="embed-responsive embed-responsive-16by9"> <!-- 21by9, 16by9, 4by3, 1by1 -->
          <iframe class="embed-responsive-item" src="<?=$post->url?>"></iframe>
        </div>
      </div>
      <div class="col-sm-6">
        <p class="display-5"><?=$post->content?></p>
        <p class="card-text">
          <small class="text-time">
            <em>Publicado em <?=date('M,d',strtotime($post->created))?></em>
          </small>
        </p>
      </div>
    </div>
  </div>
    <?php
    }
  }
  ?>
</div>

After a reading in the address: https://getbootstrap.com/docs/4.1/components/navs/#pills the problem has been solved and the correction is in bold.