我有一个wordpress问题。我试图让三个 div 在用户单击链接时切换可见性。我的问题是每个 WP_Query 的所有结果都在HomeDisplaySeldiv 下。我计算了每个 div 的开始和结束位置，甚至添加了额外的结束 div，但没有任何效果。我不能将每个帖子类别分成不同的 div。谢谢您的帮助。
<div id="HomeDisplaySel">
<?php $AllPostsArgs = array ('posts_per_page' => 6, 'category' => 'posts'); ?>
<?php $AllPosts = new WP_Query($AllPostsArgs); ?>
<?php while($AllPosts->have_posts()) : $AllPosts->the_post(); ?>
<a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1></a>
<div id="Author">
<?php $authID = get_the_author_meta('ID'); ?>
<?php echo get_avatar($authID); ?>
<h5><?php the_author();?></h5><br />
<h5><?php the_author_meta('user_description'); ?></h5>
</div>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<br />
<p><?php the_excerpt(__('(more...)')); ?></p>
<hr>
<?php endwhile; ?>
</div>
<div id="WKTSel">
<?php $AllPostsArgs = array ('posts_per_page' => 6, 'category' => 'workouts'); ?>
<?php $WKTS = new WP_Query("posts_per_page=6&category=workouts"); ?>
<?php while($WKTS->have_posts()) : $$WKTS->the_post(); ?>
<a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1></a>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<br />
<p><?php the_excerpt(__('(more...)')); ?></p>
<hr>
<?php endwhile; ?>
</div>
<div id="THPYSel">
<?php $AllPostsArgs = array ('posts_per_page' => 6, 'category' => 'therapy'); ?>
<?php $WKTS = new WP_Query("posts_per_page=6&category=workouts"); ?>
<?php while($WKTS->have_posts()) : $$WKTS->the_post(); ?>
<a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1></a>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<br />
<p><?php the_excerpt(__('(more...)')); ?></p>
<hr>
<?php endwhile; ?>
</div>
编辑
当我在 chrome 中查看源代码时，这就是我所看到的。
<!-- Home Page -->
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title> | The MindStream Academy Blog</title>
<link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://localhost:8888/MindstreamBlog/wp-content/themes/mindstream/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="changehome.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="http://localhost:8888/MindstreamBlog/wp-content/uploads/2013/01/logo.png" alt="MindStream_Academy_Logo" id="logo" />
</div><div id="sidebar">
<li class="page_item page-item-8"><a href="http://localhost:8888/MindstreamBlog/?page_id=8">Home</a></li>
<li class="page_item page-item-9"><a href="http://localhost:8888/MindstreamBlog/?page_id=9">About</a></li>
<li class="page_item page-item-11"><a href="http://localhost:8888/MindstreamBlog/?page_id=11">Students</a></li>
<li class="page_item page-item-14"><a href="http://localhost:8888/MindstreamBlog/?page_id=14">Archives</a></li>
<li class="page_item page-item-13"><a href="http://localhost:8888/MindstreamBlog/?page_id=13">Fan Mail</a></li>
<li class="page_item page-item-16"><a href="http://localhost:8888/MindstreamBlog/?page_id=16">Contact</a></li>
</div><div id="main">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="changehome.js"></script>
<div class="col">
<div class="ChangeHome">
<h2><a href='#' id='LoadRP'>Recent<br />Posts</a></h2>
</div>
<div class="ChangeHome">
<h2><a href='#' id='LoadWOTW'>Workout of<br />the Week</a></h2>
</div>
<div class="ChangeHome">
<h2><a href='#' id='LoadWT'>Weekly Therapy</a></h2>
</div>
</div>
<div id="HomeDisplaySel">
<a href="http://localhost:8888/MindstreamBlog/?p=43"><h1>Workout #1</h1></a>
<div id="Author">
<img width="96" height="96" src="http://localhost:8888/MindstreamBlog/wp-content/uploads/2013/01/Ian-clarke-headshot-1-150x150.png" class="avatar avatar-96 photo wp-post-image" alt="" /> <h5>Hunter Willis</h5><br />
<h5>2012 Fall & Spring</h5>
</div>
<h4>Posted on February 16th, 2013</h4>
<br />
<p><p>Hey all. How is everyone? Pumped? I know I am! Here is a workout for your arms and core to [...]</p>
</p>
<hr>
<a href="http://localhost:8888/MindstreamBlog/?p=36"><h1>Test 3</h1></a>
<div id="Author">
<img width="96" height="96" src="http://localhost:8888/MindstreamBlog/wp-content/uploads/2013/01/Ian-clarke-headshot-1-150x150.png" class="avatar avatar-96 photo wp-post-image" alt="" /> <h5>Hunter Willis</h5><br />
<h5>2012 Fall & Spring</h5>
</div>
<h4>Posted on February 6th, 2013</h4>
<br />
<p><p>Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test [...]</p>
</p>
<hr>
<a href="http://localhost:8888/MindstreamBlog/?p=33"><h1>Test 2</h1></a>
<div id="Author">
<img width="96" height="96" src="http://localhost:8888/MindstreamBlog/wp-content/uploads/2013/01/Ian-clarke-headshot-1-150x150.png" class="avatar avatar-96 photo wp-post-image" alt="" /> <h5>Hunter Willis</h5><br />
<h5>2012 Fall & Spring</h5>
</div>
<h4>Posted on February 6th, 2013</h4>
<br />
<p><p>Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test [...]</p>
</p>
<hr>
<a href="http://localhost:8888/MindstreamBlog/?p=26"><h1>Test</h1></a>
<div id="Author">
<img width="96" height="96" src="http://localhost:8888/MindstreamBlog/wp-content/uploads/2013/01/Ian-clarke-headshot-1-150x150.png" class="avatar avatar-96 photo wp-post-image" alt="" /> <h5>Hunter Willis</h5><br />
<h5>2012 Fall & Spring</h5>
</div>
<h4>Posted on January 25th, 2013</h4>
<br />
<p><p>Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test testeroo! Test test [...]</p>
</p>
<hr>
</div>
<div id="WKTSel">