Mostrar uma div enquanto oculta outras divs com jquery ao clicar nos links
Eu estou tentando criar um esquema de navegação que tem uma série de links e número de divs. Quando eu clico no link 1 eu quero mostrar div 1. Se eu clicar no link 2 eu quero esconder 1 e mostrar 2 etc.
Consegui fazer o seguinte código funcionar. No entanto, o que está acontecendo é quando qualquer outro link na página é clicado, o div que está sendo exibido desaparece / oculta.
Eu tentei várias soluções, mas não consegui descobrir isso. Alguém pode fornecer algumas informações sobre o que pode estar acontecendo com base no código abaixo.
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');
});