jQuery onclick mostra/nascondi più div

Question

Sto cercando di imparare alcuni jQuery e apparentemente non ho imparato nulla dalle mie ultime domande e le risposte che ho, dal momento che non riesco a capire come fare quanto segue:

https://jsfiddle.net/9eofcw7w/

Sì, sta funzionando, ma il codice come questo è solo sciatta e non è professionale:

$('#tab1').click(function() { 
$('#tab2show').hide(); 
$('#tab3show').hide(); 
$('#tab4show').hide(); 
$('#tab5show').hide(); 

$('#tab1show').show(); 
}); 

Come potrei fare per rendere il codice di cui sopra, con poche righe di jQuery al posto del roba che ho adesso?

Answer 1

Il problema con il tuo codice è che stai ripetendo lo stesso blocco di codice per ogni elemento, invece puoi usare alcuni attributi comuni per ridurre i gestori separati come

Per prima cosa aggiungiamo una classe comune a tutti gli elementi di tabulazione come tab, quindi un'altra classe tab-content viene aggiunta a tutti gli elementi di contenuto, questo aiuterà noi per selezionare facilmente quegli elementi.

Quindi la logica che stiamo cercando è, dobbiamo mostrare solo quello content il cui id corrisponde alla scheda cliccata (l'id del contenuto è <clicked tab id> + 'show').

Ora possiamo avere un unico gestore di clic che si rivolgerà tutti gli tab elementi, in cui ci concatenare il suo id con 'show' per trovare il contenuto da mostrare e lo visualizza tramite .show() poi ci nasconde tutti gli altri elementi tab-content.

Si noti inoltre che è possibile memorizzare nella cache l'oggetto jQuery per tab-content per l'utilizzo futuro.

var $contents = $('.tab-content'); 
 
$contents.slice(1).hide(); 
 
$('.tab').click(function() { 
 
    var $target = $('#' + this.id + 'show').show(); 
 
    $contents.not($target).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="tab1" class="tab">Test 1</div> 
 
<div id="tab2" class="tab">Test 2</div> 
 
<div id="tab3" class="tab">Test 3</div> 
 
<div id="tab4" class="tab">Test 4</div> 
 
<div id="tab5" class="tab">Test 5</div> 
 

 
<br /> 
 
<br /> 
 

 
<div id="tab1show" class="tab-content"> 
 
    test 1 default = show 
 
</div> 
 

 
<div id="tab2show" class="tab-content"> 
 
    test 2 
 
</div> 
 

 
<div id="tab3show" class="tab-content"> 
 
    test 3 
 
</div> 
 

 
<div id="tab4show" class="tab-content"> 
 
    test 4 
 
</div> 
 

 
<div id="tab5show" class="tab-content"> 
 
    test 5 
 
</div>

Answer 2

Ecco un approccio si può prendere:

Prima aggiungere un div div involucro sopra che si fa clic. In questo modo sarà più facile per aggiungere i gestori di eventi:

<div id="clicks"> 
    <div id="tab1">Test 1</div> 
    <div id="tab2">Test 2</div> 
    <div id="tab3">Test 3</div> 
    <div id="tab4">Test 4</div> 
    <div id="tab5">Test 5</div> 
</div> 

poi avvolgere tutti i div che si sta visualizzare/nascondere con un altro div. In questo modo sarà più facile per mostrare/nascondere tutti i div:

<div id="tabShows"> 
    <div id="tab1show">test 1 default = show</div> 
    <div id="tab2show">test 2</div> 
    <div id="tab3show">test 3</div> 
    <div id="tab4show">test 4</div> 
    <div id="tab5show">test 5</div> 
</div> 

quindi utilizzare questo gestore di eventi:

// when user click on any div inside div 'clicks' 
$('#clicks').on('click', 'div', function(event){ 

    // Get the id of a div that was clicked, e.g. tab1 
    var tabId = $(this).attr('id'); 

    // Hide all divs inside div 'tabShows' 
    $('#tabShows div').hide(); 

    // Show only div that was clicked, e.g. tab1show 
    $('#' + tabId + 'show').show(); 
}); 

Ecco il link per aggiornato jsFiddle

Answer 3

<div id="tab1" class="ta">Test 1</div> 
<div id="tab2" class="ta">Test 2</div> 
<div id="tab3" class="ta">Test 3</div> 
<div id="tab4" class="ta">Test 4</div> 
<div id="tab5" class="ta">Test 5</div> 

<br /><br /> 

<div id="tab1show" class="tab"> 
    test 1 default = show 
</div> 

<div id="tab2show" class="tab"> 
    test 2 
</div> 

<div id="tab3show" class="tab"> 
    test 3 
</div> 

<div id="tab4show" class="tab"> 
    test 4 
</div> 

<div id="tab5show" class="tab"> 
    test 5 
</div> 

$('#tab2show').hide(); 
$('#tab3show').hide(); 
$('#tab4show').hide(); 
$('#tab5show').hide(); 

$('.ta').click(function() { 
    $('.tab').hide(); 
    $("#"+$(this).attr("id")+"show").show(); 
}); 

JSFiddle

Answer 4

per tutte le pagine risposte di cui sopra ricarica avviene che stavo affrontando utilizzando queste risposte così gentilmente usare quel codice jQuery per la risposta di cui sopra acepted per evitare di default e pagina carico

<script> 
var $contents = $('.tab-content'); 
$contents.slice(1).hide(); 
$('.tab').click(function (event, ui) { 
    var $target = $('#' + this.id + 'show').show(); 
    $contents.not($target).hide(); 
    event.preventDefault(); 
    return false; 
});