Bootstrap选项卡内的Wordpress循环

Question

我正在尝试在选项卡组中的选项卡一侧进行循环调用。选项卡来自引导程序，唯一的是当页面首次加载时，循环不会，您必须单击选项卡才能加载内容。有什么方法可以确保循环在页面加载时加载？

就上下文而言，这是一个图书馆网站，内容是列出的新书籍/音乐/电影，图片左对齐，标题/作者在右侧。

这是我正在使用的代码。

 <div class="span4 pull-right">
    <h2 style="font-weight:200;">New At The Library</h2>
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#books" data-toggle="tab"><h5 style="margin:0;"><i class="icon-book"></i>  New Books</h5></a></li>
  <li><a href="#cds" data-toggle="tab"><h5 style="margin:0;"><i class="icon-music"></i>  New Music</h5></a></li>
  <li><a href="#movies" data-toggle="tab"><h5 style="margin:0;"><i class="icon-film"></i>  New Films</h5></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="books">
<?php query_posts( array ( 'category_name' => 'new-books', 'posts_per_page' => -3 ) ); ?>

<?php while ( have_posts() ) : the_post();?>
    <ul class="unstyled">
        <li class="clearfix">
            <?php echo get_the_post_thumbnail($page->ID, $arraySIZE = array('' => 120,80 ), array('class' => 'img-polaroid')); ?>
            &nbsp;
            <h4 class="pull-right" style="margin:0;"><?php the_content();?></h4>
        </li>
            <hr>
    </ul>
<?php endwhile; ?>

</div>


<div class="tab-pane" id="cds">
<?php query_posts( array ( 'category_name' => 'new-music', 'posts_per_page' => -3 ) ); ?>

<?php while ( have_posts() ) : the_post();?>
    <ul class="unstyled">
        <li class="clearfix">
            <?php echo get_the_post_thumbnail($page->ID, $arraySIZE = array('' => 80,80 ), array('class' => 'img-polaroid')); ?>
            &nbsp;
            <h4 class="pull-right" style="margin:0;"><?php the_content();?></h4>
        </li>
            <hr>
    </ul>
<?php endwhile; ?>

</div>
<div class="tab-pane" id="movies">

<?php query_posts( array ( 'category_name' => 'new-movies', 'posts_per_page' => -3 ) ); ?>

<?php while ( have_posts() ) : the_post();?>
    <ul class="unstyled">
        <li class="clearfix">
            <?php echo get_the_post_thumbnail($page->ID, $arraySIZE = array('' => 120,80 ), array('class' => 'img-polaroid')); ?>
            &nbsp;
            <h4 class="pull-right" style="margin:0;"><?php the_content();?></h4>
        </li>
            <hr>
    </ul>
<?php endwhile; ?>

</div>
</div>

Answer 1

我认为您可能必须将其中一个选项卡窗格声明为活动状态。我在 Bootstrap 3 构建中做同样的事情，并且能够以这种方式加载循环......

只需将“活动”添加到第一个选项卡窗格 div 类，如下所示：

<div class="tab-pane active" id="books">

应该做的伎俩。