Jquery:根据2个按钮的点击功能隐藏和显示div

Question

这对你们Jquery Guru来说可能是一个简单的任务，但我真的在努力做到这一点。

我有两个链接，我希望它们隐藏并显示两个表单。

最初，两个表单都必须隐藏，当您单击按钮 1 时，它必须显示表单 1，当您再次单击同一按钮时，它必须隐藏表单 1。但是，如果显示表单 1，并且您单击 BTN 2，它必须隐藏表单 1 并显示表单 2，同样，如果显示表单 2，并且您再次单击 BTN 2，它必须隐藏表单 2。

有点像在两个表单之间切换，但如果它可见，也可以隐藏另一个表单。

这是我所得到的。但它没有像我想要的那样工作，而且它似乎与 Bootstrap 4 上的脚本冲突。

$(document).ready(function() {
$("#btn1").click(function() {
$("#form1").toggle(300);
$("#form2").hide(300);
});
$("#btn2").click(function() {
$("#form2").toggle(300);
$("#form1").hide(300);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="btn1">Btn 1</a>
<a href="#" id="btn2">Btn 2</a>
<div id="form1" style="display: none;">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Form 1</h4>
</div>
</div>
<div id="form2" style="display: none;">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Form 2</h4>
</div>
</div>

我也试过这个。这通过在窗体之间更改来工作，但如果打开窗体，单击相同的按钮不会关闭(切换(窗体。顺便说一下，这个脚本在引导4中工作。

$("#leather").click(function() {
var id = $(this).attr("id");
$("#pages div#gumboots").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
$("#gumboots").click(function() {
var id = $(this).attr("id");
$("#pages div#leather").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="leather">leather</button>
<button type="button" id="gumboots">gumboots</button>
<div id="pages">
<div id="leather" class="mydivshow" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
<div id="gumboots" class="mydivhide" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
</div>

Answer 1

只需将css()函数更改为toggle()函数即可。css()功能不会切换。

$("#leather").click(function() {
var id = $(this).attr("id");
$("#pages div#gumboots").css("display", "none");
$("#pages #" + id + "").toggle();
});
$("#gumboots").click(function() {
var id = $(this).attr("id");
$("#pages div#leather").css("display", "none");
$("#pages #" + id + "").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="leather">leather</button>
<button type="button" id="gumboots">gumboots</button>
<div id="pages">
<div id="leather" class="mydivshow" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
<div id="gumboots" class="mydivhide" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
</div>