Показывать один div, скрывая другие div с помощью jquery при переходе по ссылкам
Я пытаюсь создать схему навигации, которая имеет ряд ссылок и количество делений. Когда я нажимаю на ссылку 1, я хочу показать div 1. Если я нажимаю на ссылку 2, я хочу скрыть 1 и показать 2 и т. Д.
Я смог заставить следующий код работать. Однако при нажатии любой другой ссылки на странице элемент, который отображается в данный момент, исчезает / скрывается.
Я пробовал различные решения, но не смог понять это. Может ли кто-нибудь рассказать о том, что может происходить, основываясь на приведенном ниже коде.
HTML:
<a href="#">Property Flyers</a>
<a href="#">Open House Flyers</a>
<a href="#">Postcards</a>
<a href="#">Mortgage Flyers</a>
<a href="#">Recruiting Flyers</a>
<img src="images/templates/thumbs/property84.jpg" width="143" height="194">
<img src="images/templates/thumbs/property84.jpg" width="143" height="194">
<img src="images/templates/thumbs/property84.jpg" width="143" height="194">
<img src="images/templates/thumbs/property84.jpg" width="143" height="194">
<img src="images/templates/thumbs/property84.jpg" width="143" height="194">
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');
});