bootstrap v4选项卡nav-item数据切换不更改if语句中的选项卡窗格

Question

While the nav-item's a class changes to display an active class on click as desired, the tab-pane's active class does not change to reflect the click therefore causing the tabs to not work properly. Using Twitter Bootstrap v4. Help much appreciated. TY!

note: this does work as desired hardcoded(static) without the if statements.

update: i've updated the code a bit, also included a screenshot of the output from dev tools.

<ul class="roster-list" role="tablist">
        <?php
          $args = array(
            'post_type'      => 'post',
            'cat'            =>  6,
            'order'          => 'DSC'
          );
          query_posts($args);
          if ( have_posts() ) : while ( have_posts() ) : the_post();
          $tabRosterPostID = get_the_ID();
        ?>
        <li class="nav-item">
          <?php
            // This works
            $tabRosterPostIDCount == 0;
            if ($tabRosterPostIDCount == 0) {
              echo "<a class='active' data-toggle='tab' href='#$tabRosterPostID $tabRosterPostIDCount' role='tab'>";
            } else {
              echo "<a class='' data-toggle='tab' href='#$tabRosterPostID $tabRosterPostIDCount' role='tab'>";
            }
            $tabRosterPostIDCount++;
          ?>
            <?php the_post_thumbnail(); ?>
          </a>
        </li><!-- /.nav-item -->
        <?php
          endwhile; endif;
          wp_reset_query();
        ?>
      </ul><!-- /.roster-list -->

      <div class="tab-content">
        <?php
          $args = array(
            'post_type'      => 'post',
            'cat'            =>  6,
            'order'          => 'DSC'
          );
          query_posts($args);
          if ( have_posts() ) : while ( have_posts() ) : the_post();
          $tabContentPostID = get_the_ID();
          $rosterBigImage = get_post_meta( get_the_ID(), 'roster-big-image', true );
          $rosterMusicEmbed = get_post_meta( get_the_ID(), 'roster-music-embed', true );

          // This does not work
          $tabContentPostIDCount == 0;
          if ($tabContentPostIDCount == 0) {
            echo "<div class='tab-pane active' id='$tabContentPostID $tabContentPostIDCount' role='tabpanel'>";
          } else {
            echo "<div class='tab-pane' id='$tabContentPostID $tabContentPostIDCount' role='tabpanel'>";
          }
          $tabContentPostIDCount++;
        ?>
          <div class="team-member clearfix">
            <img src="<?php echo $rosterBigImage; ?>">
            <div class="member-copy">
              <?php
                the_title( '<h1>', '</h1>' );
                the_content();
              ?>
              <div class="sounds">
                <?php echo $rosterMusicEmbed; ?>
              </div><!-- /.sounds -->
            </div><!-- /.member-copy -->
          </div><!-- /.team-member -->
        </div><!-- /.tab-pane -->
        <?php
          endwhile; endif;
          wp_reset_query();
        ?>
      </div><!-- /.tab-content -->

screenshot of the output from dev tools

Answer 1

Be sure html ID attributes are valid, otherwise things may not work as desired.

The fix here was to set:

$tabRosterPostID = sanitize_title(get_the_title());
$tabContentPostID = sanitize_title(get_the_title());

instead of:

$tabRosterPostID = get_the_ID();
$tabContentPostID = get_the_ID();