javascript - 使用数据链接通过 jquery 显示和隐藏 div

Question

我的左侧有一张国家 map ，上面有不同的链接，显示不同的区域。右侧有一个容器，其中包含我想要显示的信息 div，具体取决于您单击的 map 上的链接。

我在链接和相关容器上设置了相同的数据类型，以便在单击链接时显示。

如何使用 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>

Answer 1

除了@m59代码之外，试试这个，

显示当前点击的a并隐藏剩余

$('a').click(function(event) {     
  var current = $(this).attr('data-link');
  $('.maps-wrapper div').hide();
  $('div[data-link='+current+']').show();
  event.preventDefault();
});