嵌套在 wordpress 循环内的引导选项卡不会切换

Question

我真的被困住了。在任何地方都找不到这个问题的答案。我有由 Wordpress 循环生成的选项卡。每个标题都是帖子的标题。当我点击标签时，我会看到标题为“overview”、“floorplan”和“spec”的子标签。

这些在第一个帖子类型选项卡上完美运行，但是如果我单击另一个帖子选项卡并单击说平面图选项卡，这不会在该选项卡中更改，但是当我返回第一个选项卡时，我在加载时打开我发现它已将其更改为平面图选项卡。 （我希望这是有道理的）

tl:dr 嵌套选项卡会更改第一个选项卡，但不会更改其他选项卡。

这是我的代码。

<ul class="nav nav-tabs" id="siteplan">

        <h3>Site Plan Key</h3>
        <ul class="key-layout list-unstyled">
        <li class="key-house lantana"><a href="#lantana" role="tab" data-toggle="tab">Lantana</a></li>
        <li class="key-house lavender"><a href="#lavender" role="tab" data-toggle="tab">Lavender</a></li>
        <li class="key-house oleander"><a href="#oleander" role="tab" data-toggle="tab">Oleander</a></li>
        <li class="key-house fern"><a href="#fern" role="tab" data-toggle="tab">Fern</a></li>
        <li class="key-house jacaranda"><a href="#jacaranda" role="tab" data-toggle="tab">Jacaranda</a></li>
        <li class="key-house holly"><a href="#holly" role="tab" data-toggle="tab">Holly</a></li>
        <li class="key-house maple"><a href="#maple" role="tab" data-toggle="tab">Maple</a></li>
        <li class="key-house hazel"><a href="#hazel" role="tab" data-toggle="tab">Hazel</a></li>
        <li class="key-house hydrangea"><a href="#hydrangea" role="tab" data-toggle="tab">Hydrangea</a></li>
        <li class="key-house camellia"><a href="#camellia" role="tab" data-toggle="tab">Camellia</a></li>
        <li class="key-house mulberry"><a href="#mullberry" role="tab" data-toggle="tab">Mulberry</a></li>
        <li class="key-house juniper"><a href="#juniper" role="tab" data-toggle="tab">Juniper</a></li>
      </ul>
    </div>

    </div>

<!-- ROW -->
  <div class="row"> 


<?php $property = (object)get_post_meta( get_the_id(), "sc_house_type_details", true); ?>
<!-- Tab panes -->

<!-- DEVELOPMENT OVERVIEW -->
<div id="development-overview">

<!-- WRAPPER -->
<div class="container-fluid">

 <!-- ROW -->
  <div class="row"> 

<!-- Tab Content -->
<div class="tab-content" id="outer">

    <!-- Outer Tabs -->
    <?php
    $counter = 0;
    $loop = new WP_Query( array( 'post_type' => 'house_type', 'posts_per_page' => -1 ) );
    while ( $loop->have_posts() ) : $loop->the_post(); 
        $counter++;
    ?>

  <div class="tab-pane <?=($counter == 1) ? 'active': ''?>" id="<?php print strtolower(get_the_title()); ?>">

     <div id="spec-tabs" class="white clearfix">

      <!-- inner tabs -->
         <ul class="nav nav-tabs dark-grey" role="tablist"  id="inner">

          <li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab" data-toggle="tab">Overview</a></li>
          <li role="presentation"><a href="#floorplan" aria-controls="floorplan" role="tab" data-toggle="tab">Floor Plans</a></li>
          <li role="presentation"><a href="#specs" aria-controls="specs" role="tab" data-toggle="tab">Specification</a></li>

            </ul>


         <!-- Inner Tab panes -->
        <div class="tab-content clearfix" id="inner-tabs">

            <div role="tabpanel" class="tab-pane fade in active clearfix" id="general">
            <div class="col-sm-12 spec-info">
                     <?php $property = (object)get_post_meta( get_the_id(), "sc_house_type_details", true); ?>
                    <h2 id="overview"><?php the_title(); ?></h2>
                    <p class="green-text"><?php echo ' '. $property->beds; ?></p>
                    </div>

                    <?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), true, '' );     ?>
                    <div class="col-sm-5">

                    <div class="property-image" style="background: url(<?php echo $src[0]; ?> ) !important;"><?php the_post_thumbnail('spec'); ?></div>
                    </div>

                    <div class="col-sm-7">

              <p><?php the_content(); ?></p>
              <div class="availability-list">
              <h3>Availability</h3>


              <ul class="availability-key list-inline">
                <li><span class="key-square avail"></span> Available</li>
                <li><span class="key-square sold"></span> Sold</li>
                <li><span class="key-square no-rel"></span> Not Released</li>
                <li><span class="key-square reserved"></span> Reserved</li>
              </ul>
              <ul class="availability list-inline">

                 <?php 


                 $plots = get_post_meta( $post->ID, 'plots', true );
                 foreach( $plots as $plotstatus ) {
                     if( $plotstatus['development'] == $title){
                    if( $plotstatus['plotno'] == 'Available'){
                    echo '<li title="Plot Available" class="avail">'. $plotstatus['title'] .'</li>';
                    }
                    if( $plotstatus['plotno'] == 'Sold'){
                    echo '<li title="Plot Sold" class="sold">'. $plotstatus['title'] .'</li>';
                    }
                    if( $plotstatus['plotno'] == 'Not Released'){
                    echo '<li title="Plot Not Released" class="no-rel">'. $plotstatus['title'] .'</li>';
                    }
                    if( $plotstatus['plotno'] == 'Reserved'){
                    echo '<li title="Plot Reserved" class="reserved">'. $plotstatus['title'] .'</li>';
                    }
                  }

                 }?>

              </ul>
              </div>
            </div>
            </div>
            <div role="tabpanel" class="tab-pane fade in clearfix" id="floorplan">
            <h2>Floor Plans</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed elit eu sem tincidunt condimentum.</p>
                <?php
                $page_id = is_home() ? 10 : get_the_id();
                if( !$floorplan_image = get_page_images($page_id, 'sc_floorplan_image') ){
                } else {
                $floorplan_image = $floorplan_image[0];
                }   ?>
                <img src="<?php echo $floorplan_image[0];?>"> 
            </div>
            <div role="tabpanel" class="tab-pane fade in clearfix" id="specs">

              <?php $general_spec = get_post_meta(get_the_ID(), '_ht_specification', false ); ?>
              <?php echo $general_spec[0]; ?>
            </div>
            </div>
       </div>
          </div>


      <?php endwhile; ?>

Answer 1

使用标题作为选项卡名称的唯一参考可以解决问题。

即 此标签标题：

<a href="#floorplan-<?php print strtolower(get_the_title()); ?>

与此标签 ID 相关：

<div role="tabpanel" class="tab-pane fade in clearfix" id="floorplan-<?php print strtolower(get_the_title()); ?>">