我有一个名为container的父div。在这个div中有一个名为togglelinks的主类别nav。这在名为categoriespeople内的div类之间切换,每个类别大约有5个,例如peoplebusiness等。我只在下面显示了people的代码。
所以对于div classpeople是具有id的多个div。着陆的那一个将是people。在id为“people”的div中有多个li链接,链接到div idpeople之外的div id,例如businesshighlife。因此,当点击id“people”中的链接时,它会隐藏idpeople并显示idbusiness作为示例。剩下的结构我会搞清楚,这只是我正在挣扎的一部分。
基本(简化)结构如下:

<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:
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();
});

最佳答案

如果这是你想做的,请告诉我。
小提琴在人、商业和高级生活中导航,一次显示一个部分。
jsFiddle

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

10-05 20:57
查看更多