Question

虽然导航项的类更改为根据需要在单击时显示活动类，但选项卡窗格的活动类不会更改以反映单击因此导致选项卡无法正常工作。使用Twitter Bootstrap v4。非常感谢。 TY！

注意：这确实可以在没有if语句的情况下按需要硬编码（静态）。

更新：我稍微更新了代码，还包括开发工具输出的屏幕截图。

<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

确保html ID属性有效，否则事情可能无法正常工作。

此处的修复是设置：

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

而不是：

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

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

1 个答案: