我正在尝试创建一个包含一系列链接和多个 div 的导航方案。当我点击链接 1 时,我想显示 div 1。如果我点击链接 2,我想隐藏 1 并显示 2 等等。
我能够让下面的代码工作。但是,发生的情况是,当单击页面上的任何其他链接时,当前显示的 div 会消失/隐藏。
我尝试了各种解决方案,但一直无法解决这个问题。有人可以根据下面的代码对可能发生的事情提供一些见解。
HTML:
<ul id="navigation">
<li data-tab="property" class="activeitem settingLink active"><a href="#">Property Flyers</a></li>
<li data-tab="openhouse" class="settingLink"><a href="#">Open House Flyers</a></li>
<li data-tab="postcards" class="settingLink"><a href="#">Postcards</a></li>
<li data-tab="mortgage" class="settingLink"><a href="#">Mortgage Flyers</a></li>
<li data-tab="recruiting" class="settingLink"><a href="#">Recruiting Flyers</a></li>
</ul>
<div id="property" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
<div id="openhouse" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
<div id="Postcards" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
<div id="Mortgage" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
<div id="Recruiting" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
JavaScript:
$('a').on('click', function(e) {
e.preventDefault();
var $li = $(this).closest('li');
var tab = $li.data('tab');
var current = $('.active.settingLink').data('tab');
$('#' + current).fadeOut('fast', function() {
//Slide the new div down
$('#' + tab).fadeIn();
});
//Remove active class from current link
$('.active.settingLink').removeClass('active');
$li.addClass('active');
});
最佳答案
$('a')
以每个 <a>
为目标页面中的标记,您需要更具体的选择器:
$("#navigation a');
关于jquery - 单击链接时显示一个 div,同时使用 jquery 隐藏其他 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14673189/