带有POST_TITLE的动态引导选项卡不显示_CONTENT

时间:2015-06-23 作者:tibewww

我正在尝试使用引导选项卡创建以下选项卡系统:

每个选项卡都有\\u标题(文章标题),单击每个选项卡,即可显示内容。

到目前为止,我已经正确列出了所有选项卡,第一个选项卡显示了良好的内容。但是,单击另一个选项卡时,内容不会更改为显示它应该显示的内容。

我想我需要为此提供一个类post ID,并将Href链接到同一个类post ID。

下面是我尝试使用的代码-未成功:(:

<?php get_header(); ?>

 <div class="container ">

<div id="tab">
<ul class="nav nav-tabs" role="tablist">
    <?php $loop = new WP_Query( array( \'post_type\' => \'candidates\', \'posts_per_page\' => -1 ) ); ?>
  <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

<li role="presentation" class="post-<?php the_ID(); ?>"><a href="#post-<?php the_ID(); ?>" aria-controls="home" role="tab" data-toggle="tab"><?php the_title();?></a></li>

    <?php endwhile; wp_reset_query(); ?>


    </ul>

      <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="post-<?php the_ID(); ?>"><?php the_content();?></div>

   </div>

    </div>
任何帮助都会很棒:):)

谢谢大家!

1 个回复
最合适的回答,由SO网友:Jamie 整理而成

如果上面的代码在while循环中循环,则应该正确输出选项卡,而不是内容。

您需要在选项卡内容区域内再次重复此循环。此外,您还需要确保每个表内容区域都没有活动的类。活动类应仅位于第一个类上。如果计数器为1,则可以在循环中使用计数器和简写if语句来添加active类

<div id="tab">
    <ul class="nav nav-tabs" role="tablist">
        <?php $loop = new WP_Query( array( \'post_type\' => \'candidates\', \'posts_per_page\' => -1 ) ); ?>
        <?php 
        $counter = 0;
        while ( $loop->have_posts() ) : $loop->the_post(); 
            $counter++;
        ?>
            <li role="presentation" class="post-<?php the_ID(); ?> <?=($counter == 1) ? \'active\' : \'\'?>"><a href="#post-<?php the_ID(); ?>" aria-controls="home" role="tab" data-toggle="tab"><?php the_title();?></a></li>
        <?php endwhile; wp_reset_query(); ?>
    </ul>
    <div class="tab-content">
        <?php
        $counter = 0;
        $loop = new WP_Query( array( \'post_type\' => \'candidates\', \'posts_per_page\' => -1 ) );
        while ( $loop->have_posts() ) : $loop->the_post(); 
            $counter++;
        ?>
            <div role="tabpanel" class="tab-pane <?=($counter == 1) ? \'active\' : \'\'?>" id="post-<?php the_ID(); ?>"><?php the_content();?></div>
        <?php endwhile; ?>
    </div>
</div>
请注意,我实际上还没有尝试过这个,所以如果它不起作用,请告诉我。

结束

相关推荐

jQuery Tabs in Shortcode API

html原型的Pastebin和我对wp函数的尝试->http://pastebin.com/91zBv8sk我想要一个简单的符号,以便新用户可以轻松使用。这样的话:[选项卡]第一个选项卡的内容第二个选项卡的内容[/选项卡]我理解为什么函数的符号是错误的,但我想我会放弃我最好的尝试。