Показать один div и скрыть других, нажав на ссылку

Question

У меня есть список с 37 ссылками и 37 скрытыми divs с некоторым текстом. Счетчик начинается с 3 и заканчивается 40. То, что я хотел бы сделать, это отобразить div, когда я нажимаю ссылку, а также скрываю все остальные div.

Ссылки выглядеть следующим образом:

<a href="#" rel="week_3">Week 3</a> 
<a href="#" rel="week_4">Week 4</a> 

Divs выглядеть следующим образом:

<div id="week_3" style="display: none">[...]</div> 
<div id="week_4" style="display: none">[...]</div> 

Я хотел бы выполнить эту задачу с помощью JQuery. То, что я не знаю, как сделать, это создать цикл и проверить, не было ли нажата ни одна из этих ссылок.

Answer 1

Что-то вдоль линии:

$('a').on('click', function(){ 
    var target = $(this).attr('rel'); 
    $("#"+target).show().siblings("div").hide(); 
}); 

Если сделать трюк.

P.S: ваши div должны быть в контейнере, чтобы это работало. Fiddle.

Answer 2

Сделайте одну вещь

Дайте ваши дивы класс так, чтобы при нажатии на ссылки вы можете скрыть этот конкретный класс, а затем показывает нужный DIV щелчком ссылку

<div class="abc"></div> 
<div class="abc"></div> 
<div class="abc"></div> 

<a href="#" onClick="$('.abc').hide();"> 

Answer 3

Попробуйте это:

HTML:

<a class="link" href="#" data-rel="content1">Link 3</a> 
<a class="link" href="#" data-rel="content2">Link 4</a> 
<a class="link" href="#" data-rel="content3">Link 5</a> 
<a class="link" href="#" data-rel="content4">Link 6</a> 
<a class="link" href="#" data-rel="content5">Link 7</a> 

<div class="content-container"> 
    <div id="content3">This is the test content for part 3</div> 
    <div id="content4">This is the test content for part 4</div> 
    <div id="content5">This is the test content for part 5</div> 
    <div id="content6">This is the test content for part 6</div> 
    <div id="content7">This is the test content for part 7</div> 
</div> 

CSS:

.content-container { 
    position: relative; 
    width: 400px; 
    height: 400px; 
} 
.content-container div { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

Сценарий:

$(".link").click(function(e) { 
    e.preventDefault(); 
    $('.content-container div').fadeOut('slow'); 
    $('#' + $(this).data('rel')).fadeIn('slow'); 
}); 

Fiddle

Answer 4

$("a").each(function(index) { 
    var id = $(this).attr('rel'); 
    $('.data').hide(); 
    $('#'+id).show(); 
}); 

Answer 5

Кушайте общий класс для всех div скажем, как class='week'. И используйте следующую команду:

$("a[rel^='week']").on('click', function(){ 
    $("div.week").hide(); 
    var targetDiv = $(this).attr('rel'); 
    $("#"+targetDiv).show(); 

});

Answer 6

вы можете проверить ниже как jsfiddle файл. он работает нормально. вы хотите, как этот тип?

http://jsfiddle.net/UpuDU/ [Аккордеон Тип]

http://jsfiddle.net/UpuDU/6/ [Tab Type]