У меня есть карта страны слева с различными ссылками, отображающими разные области. Справа у меня есть контейнер, содержащий информационные divs, которые я хочу показать, в зависимости от того, какую ссылку на карте вы нажали.
Я установил один и тот же тип данных в ссылке и соответствующем контейнере, чтобы показать, когда нажата ссылка.
Как я могу использовать jquery для исчезновения видимого содержимого, а затем исчезнуть в соответствующем контенте, ориентированном на тип данных?
<div class="map">
<a data-link="HQ" title="HQ Gauteng" class="pin pin-1" href=""><img src="images/pin.png" alt=""></a>
<a data-link="Johannesburg" title="Johannesburg" class="pin pin-2" href=""><img src="images/pin.png" alt=""></a>
<a data-link="Centurion" title="Centurion" class="pin pin-3" href=""><img src="images/pin.png" alt=""></a>
<a data-link="NorthWest" title="North West" class="pin pin-4" href=""><img src="images/pin.png" alt=""></a>
<a data-link="Mapumalanga" title="Mapumalanga" class="pin pin-5" href=""><img src="images/pin.png" alt=""></a>
<a data-link="Natal" title="Kwazulu Natal" class="pin pin-6" href=""><img src="images/pin.png" alt=""></a>
</div>
<div class="maps-wrapper">
<div data-link="HQ" id="map-1">This is the map container 1</div>
<div data-link="Johannesburg" id="map-2">This is the map container 2</div>
<div data-link="Centurion" id="map-3">This is the map container 3</div>
<div data-link="NorthWest" id="map-4">This is the map container 4</div>
<div data-link="Mapumalanga" id="map-5">This is the map container 5</div>
<div data-link="Natal" id="map-6">This is the map container 6</div>
</div>
В дополнение к коду @m59, попробуйте это,
Показать текущее нажатие кнопки a
и hide
$('a').click(function(event) {
var current = $(this).attr('data-link');
$('.maps-wrapper div').hide();
$('div[data-link='+current+']').show();
event.preventDefault();
});
$('a[data-link]').click(function() {
//get this link dataLink value
var dataLink = $(this).attr('data-link');
//select the div with the same value
var toKeep = 'div[data-link="'+dataLink+'"]';
//select data-link divs that are not the above div
$('div[data-link]').not(toKeep).hide();
//show selected div
$(toKeep).show();
//prevent location change
return false;
});
Поскольку у вас есть href=""
вам также нужно будет return false
в конце функции щелчка, чтобы предотвратить изменение местоположения. Я рекомендую удалить атрибут href
. Это необязательное свойство.
$(document).ready(function(){
$('maps-wrapper').hide();
/** trigger function **/
$('a.pin').click(function(){
var datalink = $(this).data('link');
$('.maps-wrapper div').fadeOut('fast');
$('div[data-link='+datalink+']').fadeIn(1000);
});
$('a.pin-1').click();
event.preventDefault();
})