我有一个名为container
的父div。在这个div中有一个名为togglelinks
的主类别nav。这在名为categories
的people
内的div类之间切换,每个类别大约有5个,例如people
,business
等。我只在下面显示了people
的代码。
所以对于div classpeople
是具有id的多个div。着陆的那一个将是people
。在id为“people”的div中有多个li链接,链接到div idpeople
之外的div id,例如business
和highlife
。因此,当点击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();
});