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

Question

我在左边有一个国家地图，上面有不同的链接，显示不同的地区。在右边，我有一个容器，其中包含我想要显示的信息-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>

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();
});

Answer 2

$('a[data-link]').click(function() {

  //get this link's 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属性。这是一个可选属性。

Answer 3

$(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();
})

http://jsfiddle.net/selvarajblr93/GMUSx/8/