隐藏div并显示另一个div

Question

我只想在有人点击“添加”按钮时显示div。如果他再次单击“添加”按钮，则需要隐藏当前的按钮并显示另一个div。它还需要在顶部区域显示已批准的div列表。如果有人点击顶部区域批准的div，则需要再次加载div。

我试图隐藏并显示点击但没有运气。 （我对jquery有点新鲜，我知道这是非常基本的代码。）

这是小提琴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

做以下事情： -

1.在脚本代码之前添加jQuery库。

2.将代码包含在$(document).ready(function(){..});内（在HTML上方添加脚本代码时需要。如果在页面底部添加脚本代码，则不需要包装）。

3.单击自己show(),hide()。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

小提琴示例： - How to check if user already exists in MySQL with PHP

<强> 注： -

如果您想逐个展示，请执行以下操作： -

https://jsfiddle.net/rrj1818a/

Answer 2

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

});