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

Question

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.

Link simile a questa:

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

div simile a questa:

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

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

Answer 1

Qualcosa lungo la linea del:

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

dovrebbe fare il trucco.

P.S: i tuoi div devono essere in un contenitore perché funzioni. Fiddle.

Answer 2

Fare una cosa

Lascia la tua div una classe in modo che quando si fa clic su un link è possibile nascondere quella classe particolare e poi mostra la div voluta dal clic di collegamento

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

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

Answer 3

Prova questo:

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

Qualche classe comune per tutti i div s dire come class='week'. E utilizzare il seguente per fare il necessario:

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

});

Answer 6

è possibile controllare sotto il file jsfiddle. sta funzionando bene. vuoi questo tipo?

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

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