показать и скрыть div с помощью jquery, используя data-link

Question

показать и скрыть div с помощью jquery, используя data-link

0

У меня есть карта страны слева с различными ссылками, отображающими разные области. Справа у меня есть контейнер, содержащий информационные 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>

Gavin Wood 17 янв. 2014, в 07:10

Источник

0

Вы имеете в виду канал передачи данных?
Laird Streak 17 янв. 2014, в 05:42
0

Не забудьте нажать на галочку слева от самого полезного ответа!
m59 04 март 2014, в 16:55

Теги:

javascript

jquery

html

3 ответа

Ещё вопросы

Вы имеете в виду канал передачи данных?
Не забудьте нажать на галочку слева от самого полезного ответа!

Krish R · Answer 1 · 2014-01-17T02-50-00.000Z

В дополнение к коду @m59, попробуйте это,

Показать текущее нажатие кнопки a и hide

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

работает отлично !!!!! благодарю вас

m59 · Answer 2 · 2014-01-17T03-23-00.000Z

$('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. Это необязательное свойство.

Живой демо здесь (нажмите).

это только скрывает текущий видимый div
@GavinWood Первоначально я думал, что вы хотите скрыть элемент с той же ссылкой на данные. Я должен быть усталым = D В любом случае, мой обновленный ответ скрывает других и показывает только элемент с той же ссылкой на данные. Смотрите обновленную демонстрацию.

Selvaraj · Answer 3 · 2014-01-17T03-18-00.000Z

$(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/