Hide div und zeige ein anderes divs

Question

Ich möchte nur ein Div anzeigen, wenn jemand auf "Hinzufügen" klicken. Wenn er den "Hinzufügen" -Button erneut anklickt, muss er den aktuellen ausblenden und ein anderes div anzeigen. Es muss auch die genehmigte div-Liste im oberen Bereich anzeigen. Wenn jemand auf den freigegebenen div-Bereich klickt, muss der div erneut geladen werden.

Ich versuche auf Klick zu verstecken und zeigen, aber kein Glück. (. Ich bin etwas Neues zu jquery und ich weiß, das ist ziemlich einfach Code ist)

Hier ist die Geige Fiddle

$('.add-box').click(function() { 
 
    $('.test-div-2').show(); 
 
}); 
 

 
$('.add-box').click(function() { 
 
    $('.test-div-1').hide(); 
 
});

.test-div-1, 
 
.test-div-2, 
 
.test-div-3 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test-div-1">1</div> 
 
<div class="test-div-2">2</div> 
 
<div class="test-div-3">3</div> 
 

 
<a class="add-box">Add</a>

Answer 1

unten Dinge tun: -

1 Fügen Sie vor dem Skriptcode die jQuery-Bibliothek hinzu.

2.Schreiben Sie Ihren Code innerhalb $(document).ready(function(){..}); (benötigt, wenn Skript-Code über dem HTML hinzugefügt wird. Wenn Script-Code am unteren Rand der Seite hinzugefügt wird, dann ist ein Umbruch nicht erforderlich).

3.Do show(),hide() in einem Klick selbst.

$(document).ready(function(){ 
 
    $('.add-box').click(function() { 
 
    $('.test-div-2').show(); 
 
    $('.test-div-1').hide(); 
 
    }); 
 
});

.test-div-1, 
 
.test-div-2, 
 
.test-div-3{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test-div-1">1</div> 
 
<div class="test-div-2">2</div> 
 
<div class="test-div-3">3</div> 
 

 
<a class="add-box">Add</a>

Fiddle Beispiel: - https://jsfiddle.net/rrj1818a/

Hinweis: -

Wenn Sie one-by-one zu zeigen, dann wie unten tun: -

https://jsfiddle.net/87re6avo/

Answer 2

die Antwort nach Ihrem Kommentar

Ich denke, das ist das Ergebnis Sie nach meinem Verständnis Ihrer Frage suchen Edited.

Dabei Ihre jeder Klick wird verstecken die vorherige div und zeigen die nächste div mit einer fortlaufenden Nummer.

Auf dem ersten Klick, wird es die test-div-1 dann auf der nächsten zeigen sie test-div-2 zeigen und es geht so weiter und ich habe auch einen if Zustand zu überprüfen, ob der erhöhte div vorhanden, so wird es nicht schaffen einen Fehler angebracht indem du alle div versteckst.

Ich habe JQuery an dieses Beispiel angehängt, also vergessen Sie nicht, das in Ihren Code einzufügen.

var d1 = ''; 
 

 
$('.add-box').click(function() { 
 
    d1++ 
 
    var d2 = +d1 - 1 
 
    if ($('.test-div-' + d1).length > 0) { 
 
    var clone = $('.test-div-' + d1).clone() 
 
    $('.test-div-' + d2).hide(); 
 
    $('.test-div-' + d1).show(); 
 
    $('.top-header').append(clone); 
 
    $('.top-header').find('.test-div-' + d2).show(); 
 
    } 
 
});

.test-div-1, 
 
.test-div-2, 
 
.test-div-3 { 
 
    display: none; 
 
} 
 
.top-header{ 
 
height:100px; 
 
width:100%; 
 
background:pink; 
 
} 
 
.top-header div{ 
 
display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="top-header"> 
 

 
</div> 
 

 

 
<div class="test-div-1">1</div> 
 
<div class="test-div-2">2</div> 
 
<div class="test-div-3">3</div> 
 

 
<a class="add-box">Add</a>

SECOND SNIPPET mit anderen Inhalten hinzugefügt (wie Schließen-Schaltfläche)

Sie können den Rest der notwendigen Stil.

var d1 = ''; 
 

 
$('.add-box').click(function() { 
 
    d1++ 
 
    var d2 = +d1 - 1 
 
    if ($('.test-div-' + d1).length > 0) { 
 
    var clone = $('.test-div-' + d1).clone().append('Item <a href="javascript:void(0);">X</a>') 
 
    $('.test-div-' + d2).hide(); 
 
    $('.test-div-' + d1).show(); 
 
    $('.top-header').append(clone); 
 
    $('.top-header').find('.test-div-' + d2).show(); 
 
    } 
 
});

.test-div-1, 
 
.test-div-2, 
 
.test-div-3 { 
 
    display: none; 
 
} 
 
.top-header{ 
 
height:100px; 
 
width:100%; 
 
background:pink; 
 
} 
 
.top-header div{ 
 
display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="top-header"> 
 

 
</div> 
 

 

 
<div class="test-div-1">1</div> 
 
<div class="test-div-2">2</div> 
 
<div class="test-div-3">3</div> 
 

 
<a class="add-box">Add</a>

Hoffnung war hilfsbereit.

Answer 3

<div class="test-div active">1</div> 
<div class="test-div">2</div> 
<div class="test-div">3</div> 
<a class="add-box">Add</a> 



$('.add-box').click(function(e) { 
e.preventDefault(); 
var $current = $('.test-div.active'); 
var $next = $current.next(); 

$current.removeClass('active'); 



if(!$next.length) { 
$next = $('.test-div').first(); 


} 



$next.addClass('active'); 

});