我有一个自定义循环，可以获取所有自定义帖子，在这个循环中，我有一个隐藏的弹出窗口，其中包含每个帖子的数据。一旦你点击了一个帖子，它就会打开一个包含数据的弹出窗口。每个弹出窗口都有一个侧栏，其中包含指向所有其他帖子的链接，当前打开的帖子链接应突出显示为活动。重要事项侧边栏中的每个链接在href中都应该有以下格式：#$post-id 因此，单击后，它可以打开其他弹出窗口。正如您所看到的，侧栏链接目前是硬编码的，但我想让它们成为动态的。
以下是HTML版本的演示链接，以演示其工作原理-http://deothemes.com/sites/puravida/diving.html如果你向下滚动到潜水地点，你会看到4篇帖子。尝试单击它们。
<?php $divePosts = new WP_Query(array(
\'post_type\' => \'dive-site\',
\'posts_per_page\' => -1,
)); ?>
<?php while($divePosts->have_posts()) : $divePosts->the_post(); ?>
<!-- Post -->
<div class="col-sm-3">
<a href="<?php echo \'#\' . get_the_ID(); ?>" class="dive-site-map hover-scale">
<img src="<?php echo get_stylesheet_directory_uri() . \'/img/dive_sites/dauin_coastline.jpg\'?>" class="dive-site-map__img" alt="">
<h3 class="dive-site-map__title"><?php the_title(); ?></h3>
</a>
</div>
<!-- Popup -->
<div class="dive-site-popup mfp-hide" id="<?php the_ID(); ?>">
<div class="container">
<h1 class="dive-site-popup__title"><?php the_title(); ?></h1>
<div class="row mt-60">
<aside class="col-md-3">
<h5 class="widget-title">All sites</h5>
<ul class="sidebar-links">
<li><a href="#194" class="dive-site-popup__url <?php if(get_the_ID() == 194 ) { echo \'active\'; } ?>">Apo Island</a></li>
<li><a href="#169" class="dive-site-popup__url <?php if(get_the_ID() == 169 ) { echo \'active\'; } ?>">Dauin Costline</a></li>
<li><a href="#203" class="dive-site-popup__url <?php if(get_the_ID() == 203 ) { echo \'active\'; } ?>">Sumilon and Oslob</a></li>
<li><a href="#207" class="dive-site-popup__url <?php if(get_the_ID() == 207 ) { echo \'active\'; } ?>">Siquijor</a></li>
</ul>
</aside>
<div class="col-md-9">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
最合适的回答,由SO网友:obiPlabon 整理而成
请尝试以下代码。我还没有测试过，但应该可以。我们可以使用两个不同的循环，一个用于内容，另一个用于导航，稍后使用JS或其他方式插入导航。但在这种情况下，一个循环就足够了，当然比两个循环好。您必须添加active 使用JS根据用户选择初始化。
<?php
$divePostString = \'\';
$divePostNavString = \'\';
while( $divePosts->have_posts() ) : $divePosts->the_post();
ob_start();
?>
<!-- Post -->
<div class="col-sm-3">
<a href="#<?php the_ID(); ?>" class="dive-site-map hover-scale">
<img src="<?php echo get_stylesheet_directory_uri() . \'/img/dive_sites/dauin_coastline.jpg\'?>" class="dive-site-map__img" alt="">
<h3 class="dive-site-map__title"><?php the_title(); ?></h3>
</a>
</div>
<!-- Popup -->
<div class="dive-site-popup mfp-hide" id="<?php the_ID(); ?>">
<div class="container">
<h1 class="dive-site-popup__title"><?php the_title(); ?></h1>
<div class="row mt-60">
<aside class="col-md-3">
<h5 class="widget-title">All sites</h5>
<ul class="sidebar-links">
{{SIDEBAR_LINKS}}
</ul>
</aside>
<div class="col-md-9">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
<?php
$divePostString .= ob_get_clean();
$divePostNavString .= \'<li><a href="#\' . get_the_ID() . \'" class="dive-site-popup__url">\' . get_the_title() . \'</a></li>\';
?>
<?php
endwhile;
echo str_replace( \'{{SIDEBAR_LINKS}}\', $divePostNavString, $divePostString );
wp_reset_postdata();
?>
