在同一个div中的类别和子类别之间切换 [英] Toggle between categories and sub categories within the same div

问题描述

我有一个名为 container 的父div。在该div中有一个主类别nav，名为 togglelinks 。这在类别中调用人之间的div类，每个类别大约有5个。 人，商业等。我只显示人的代码

I have a parent div called container. Within that div is a main category nav called togglelinks. This toggles between the div class within categories called people, there are about 5 per category e.g. people, business etc. I have only shown the code for people below.

因此，使用div类的人是具有ID的多个div。着陆人将人。 ID为people的div是多个li链接，用于链接div ID people 之外的div ID。 business 和 highlife 。因此，当ID人内的链接被点击时，其隐藏ID 人并且示出ID business

So with div class people are multiple divs with IDs. The landing one will be people. Within the div with id "people" is multiple li links that link to div IDs outside the div ID people e.g. business and highlife. So when a link within id "people" is clicked then it hides ID people and shows ID business as an example. The rest of the structure I will figure out, its just this part I am struggling with.

基本（简化）结构如下：

Basic (simplified) structure below:

<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>

下面是jQuery我试过的：

Below is jQuery I have tried:

jQuery("a[data-toggle]").on("click", function(e) {
    e.preventDefault();  // prevent navigating
    var selector = jQuery(this).data("toggle");  // get corresponding element
    jQuery("div").hide();
    jQuery(selector).show();
});

推荐答案

让我知道这是你想做什么。

Let me know if this is what you want to do.

小提琴通过人，商业和高人一起浏览一段时间。

The fiddle navigates through people, business and highlife showing one section at at time.

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中的类别和子类别之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！