Afficher une div et masquer les autres en cliquant sur un lien

J’ai une liste avec 37 liens et 37 divs cachés avec du texte. Le compteur commence par 3 et se termine par 40. Ce que je voudrais faire est d’afficher un div lorsque je clique sur un lien et de masquer tous les autres divs.

Les liens ressemblent à ceci:

Week 3 Week 4

Les Divs ressemblent à ceci:

 [...]
 [...]

Je voudrais effectuer cette tâche en utilisant jQuery. Ce que je ne sais pas faire, c’est de faire une boucle et de vérifier si l’un de ces liens a été cliqué.

Quelque chose le long de la ligne de:

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

Devrait faire l’affaire.

PS: vos divs doivent être dans un conteneur pour que cela fonctionne. Violon.

Essaye ça:

HTML:

 Link 3 Link 4 Link 5 Link 6 Link 7  This is the test content for part 3
 This is the test content for part 4
 This is the test content for part 5
 This is the test content for part 6
 This is the test content for part 7

CSS:

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

Scénario:

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

Violon

vous pouvez vérifier ci-dessous les deux fichiers jsfiddle . ça fonctionne bien. voulez-vous comme ce type?

http://jsfiddle.net/UpuDU/ [Type d’accordéon]

http://jsfiddle.net/UpuDU/6/ [Type d’onglet]

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

Fais une chose

Atsortingbuez une classe à vos divs afin que, lorsque vous cliquez sur un lien, vous puissiez masquer cette classe et afficher ensuite la div désirée en cliquant sur le lien.

Avoir une classe commune pour tous les div dit comme class='week' . Et utilisez ce qui suit pour faire le nécessaire:

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

});