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属性。这是一个可选的属性。

<强> Live demo here (click).

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/

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

3 个答案: