doxd96148 2017-06-22 03:01
浏览 146
已采纳

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

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

  • 写回答

1条回答 默认 最新

  • druhoytza979667566 2017-06-23 13:27
    关注

    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();
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 爬取网页信息并保存需要完整代码
  • ¥15 一分十不等功分器阻设计问题,请问这个56Ω怎么得到的
  • ¥15 (标签-matlab)
  • ¥100 求看看这个数学建模,有偿
  • ¥15 深度学习目标检测现在框架加注意力的创新可以投几区?
  • ¥15 PdfiumViewer pdf转图片
  • ¥15 利用Java连接API接口总是出问题
  • ¥15 请教一个关于镜头标定,棋盘格格子大小的问题(畸变测试)
  • ¥15 安装GroudingDINO RuntimeError: Error compiling objects for extension
  • ¥15 急!C++指针编写相关的问题