Javascript 使用数据链接使用jquery显示和隐藏div

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

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

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

这是地图容器1
这是地图容器2
这是地图容器3
这是地图容器4
这是地图容器5
这是地图容器6

由于您有

href=“”

，您还需要在单击功能结束时

返回false以防止位置更改。我建议删除
href
属性。这是一个可选属性


由于您有
href=“”
，您还需要在单击功能结束时
返回false以防止位置更改。我建议删除
href
属性。这是一个可选属性

除了@m59代码之外，请尝试以下操作：

显示当前单击的
a
并隐藏剩余内容

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

除了@m59代码，请尝试以下操作

显示当前单击的
a
并隐藏剩余内容

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


您是指数据链接吗？别忘了单击最有用答案左侧的复选标记！你是说数据链接吗？别忘了点击最有用答案左边的复选标记！这仅隐藏当前可见的div@GavinWood我原本以为您要隐藏具有相同数据链接的元素。我一定是累了，不管怎样，我的更新答案隐藏了其他答案，只显示了具有相同数据链接的元素。查看更新的演示。这仅隐藏当前可见的div@GavinWood我原本以为您要隐藏具有相同数据链接的元素。我一定是累了，不管怎样，我的更新答案隐藏了其他答案，只显示了具有相同数据链接的元素。查看更新的演示。
$(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();
})