Pokaż jednego diva i ukryj innych po kliknięciu linku

Question

Mam listę 37 linków i 37 ukrytych elementów div z tekstem. Licznik rozpoczyna się od 3, a kończy na 40. Chciałbym wyświetlić element div po kliknięciu łącza, a także ukryć wszystkie pozostałe elementy div.

Linki wyglądać następująco:

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

DIV wyglądać następująco:

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

chciałbym wykonać to zadanie za pomocą jQuery. Nie wiem, jak to zrobić, zrobić pętlę i sprawdzić, czy któryś z tych linków został kliknięty.

Answer 1

Coś wzdłuż linii:

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

powinno załatwić sprawę.

P.S: Twoi divy muszą znajdować się w pojemniku, aby to zadziałało. Fiddle.

Answer 2

zrobić jedną rzecz

Nadaj div klasy tak aby po kliknięciu na linki można ukryć tę szczególną klasę, a następnie pokazuje żądaną div przez kliknięcie linku

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

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

Answer 3

Spróbuj tego:

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

Scenariusz:

$(".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

mają pewne wspólne dla wszystkich div klasa s powiedzieć jak class='week'. I wykonaj następujące czynności, aby wykonać wymagane:

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

});

Answer 6

możesz sprawdzić poniżej zarówno plik jsfiddle. to działa dobrze. chcesz tego typu?

http://jsfiddle.net/UpuDU/ [Akordeon Type]

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