jQuery onclick show/hide mehrere divs

Question

Ich versuche, einige jQuery zu lernen und ich habe anscheinend nichts aus meinen letzten Fragen und den Antworten gelernt, da ich nicht herausfinden kann, wie man das folgende macht:

https://jsfiddle.net/9eofcw7w/

Ja, es funktioniert, aber Code wie das ist nur schlampig und ist nicht professionell:

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

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

Wie würde ich mich über den obigen Code mit nur wenigen Zeilen von jQuery statt der Herstellung Sachen, die ich gerade habe?

Answer 1

Das Problem mit Ihrem Code besteht darin, dass Sie den gleichen Codeblock wiederholen für jedes Element, stattdessen können Sie einige gemeinsame Attribute verwenden, um die separaten Handler wie

zu reduzieren. Zuerst fügen wir eine gemeinsame Klasse zu allen Registerkartenelementen wie tab hinzu, dann wird eine weitere Klasse tab-content zu allen Inhaltselementen hinzugefügt, dies wird Ihnen helfen Wir wählen diese Elemente einfach aus.

Dann die Logik, die wir suchen, ist, müssen wir nur zeigen, dass content deren ID mit dem angeklickten Tab übereinstimmt (die ID des Inhalts ist <clicked tab id> + 'show').

Jetzt können wir einen einzigen Klick-Handler haben, die alle tab Elemente zielen wird, in dem wir seine ID mit 'show' verketten den Inhalt zu finden, werden gezeigt und zeigt es über .show() dann versteckt wir alle anderen tab-content Elemente.

Beachten Sie auch, dass wir das jQuery-Objekt für tab-content zur späteren Verwendung zwischenspeichern können.

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

Hier ist ein Ansatz, die Sie ergreifen können:

zunächst eine Umhüllung div über divs hinzufügen, die Sie klicken. Dadurch wird es einfacher, Event-Handler hinzuzufügen:

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

Dann werden alle Ihre divs wickeln, die Sie Ein-/Ausblenden mit einem anderen div. Dadurch wird es leichter ein-/auszublenden alle divs:

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

Dann diese Ereignishandler verwenden:

// 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(); 
}); 

Hier ist der Link zu aktualisierenden 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

für alle oben genannten Antworten Seite neu geladen auftritt, dass ich diese Antworten mit konfrontiert war so freundlich, dass Jquery-Code für die oben acepted Antwort Standard verwenden, und Laden der Seite zu verhindern

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