Question

我有一个名为container的父div。在该div中是一个名为togglelinks的主要类别导航。这会在名为categories的{{1}}内的div类之间切换，每个类别大约有5个，例如people，people等。我只在下面展示了business的代码。

因此div类people是带有ID的多个div。着陆的将是people。在id＆＃34; div＆＃34;是多个li链接，链接到div ID people之外的div ID，例如people和business。所以，当id＆＃34; people＆＃34;单击后会隐藏ID highlife并显示ID people作为示例。我将弄清楚结构的其余部分，这正是我正在努力的部分。

以下基本（简化）结构：

business

以下是我尝试过的jQuery：

<div class="people">
 <div id="people">
  <ul>

   <li>
    <a href="#" data-toggle="#business">
    <span>Business</span>
    <img src="<?php echo get_template_directory_uri(); ?>/images/business.jpg" alt="Category People" />
    </a>
   </li>

   <li>
    <a href="#" data-toggle="#highlife">
    <span>Highlife</span>
    <img src="<?php echo get_template_directory_uri(); ?>/images/highlife.jpg" alt="Category Highlife" />
    </a>
   </li>

  </ul>
 </div>

 <div id="business">
 </div>

 <div id="highlife">
 </div>

</div>

Answer 1

如果这是您想要做的，请告诉我。

这个小提琴在人们，商业和高级生活中的导航时间显示了一个部分。

jsFiddle

   jQuery("a[data-toggle]").on("click", function (e) {
       e.preventDefault(); // prevent navigating
       var target = $(this).data('toggle');
       $('.people > div').hide();
       $('.people ' + target).fadeIn();
   });

在同一div中的类别和子类别之间切换

1 个答案: