Zeige ein div und verstecke andere beim Klicken auf einen Link

Question

Ich habe eine Liste mit 37 Links und 37 versteckte Divs mit etwas Text. Der Zähler beginnt mit 3 und endet mit 40. Was ich tun möchte, ist ein div anzuzeigen, wenn ich auf einen Link klicke und auch alle anderen divs verberge.

Verbindungen wie folgt aussehen:

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

Divs wie folgt aussehen:

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

Ich mag würde diese Aufgabe mit jQuery auszuführen. Was ich nicht tun kann, ist eine Schleife zu machen und zu überprüfen, ob einer dieser Links angeklickt wurde.

Answer 1

Etwas entlang der Linie:

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

sollte es tun.

P.S: Ihre divs müssen in einem Container sein, damit dies funktioniert. Fiddle.

Answer 2

eine Sache

Ihre divs eine Klasse Geben so dass, wenn Sie auf einem Links klicken Sie diese bestimmte Klasse verstecken und dann durch Klick auf Link, um die gewünschte div zeigt

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

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

Answer 3

versuchen Sie folgendes:

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

Script:

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

haben einige gemeinsame Klasse für alle div s wie class='week' sagen. Und folgendes verwenden, um die erforderlichen Schritte auszuführen:

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

});

Answer 6

können Sie unten beide jsfiddle Datei überprüfen. es funktioniert gut. Möchtest du diesen Typ?

http://jsfiddle.net/UpuDU/ [Akkordeon Typ]

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