我真的被卡住了。在任何地方找不到答案。我有一个由Wordpress循环生成的选项卡。每个标题都是帖子的标题。当我点击标签时，我会有子标签，标题为“概述”，“平面图”和“规格”。
这些在第一个帖子类型标签上完美运行，但是如果我点击另一个帖子标签并点击说平面图标签，这不会在该标签内更改，但是当我回到第一个标签时我在加载时打开我发现它已经改变为平面图标签。 （我希望这是有道理的）
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; ?>
答案 0 :(得分：0)
使用标题作为选项卡名称的唯一引用可以解决问题。
即。 此标题标题：
<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()); ?>">