Mostra un div e nascondi gli altri facendo clic su un link

Ho una lista con 37 collegamenti e 37 div nascosti con del testo. Il contatore inizia con 3 e termina con 40. Quello che vorrei fare è visualizzare un div quando clicco su un link e nascondo anche tutti gli altri div.

I collegamenti hanno questo aspetto:

Week 3 Week 4 

Divs assomiglia a questo:

 
[...]
[...]

Vorrei eseguire questa operazione utilizzando jQuery. Quello che non so come fare è creare un ciclo e controllare se qualcuno di questi link è stato cliccato.

Qualcosa sulla linea di:

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

Dovrebbe fare il trucco.

PS: i tuoi div devono essere in un contenitore perché funzioni. Violino.

Prova questo:

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

script:

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

Violino

puoi controllare sotto entrambi i file jsfiddle . sta funzionando bene. vuoi questo tipo?

http://jsfiddle.net/UpuDU/ [Tipo di fisarmonica]

http://jsfiddle.net/UpuDU/6/ [Tipo di tabulazione]

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

Fai una cosa

Dai una lezione alle tue div in modo che quando fai clic su un link puoi hide quella particolare class e poi mostrare il div desiderato per click del link

 

Avere qualche class comune per tutte le div come dire class='week' . E usa il seguente per fare il necessario:

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

});