javascript - Jquery:基于2个按钮的点击功能隐藏和显示div

Question

对于 Jquery Guru 来说，这可能是一项简单的任务，但我真的很难做到这一点。

我有两个链接，我希望它们隐藏和显示两种形式。

最初两个表单都必须隐藏，当您单击按钮 1 时，它必须显示表单 1，当您再次单击同一个按钮时，它必须隐藏表单 1。但是，如果显示了表单 1，并且您单击了 BTN 2它必须隐藏 Form 1 并显示 Form 2，同样，如果显示 Form 2，您再次单击 BTN 2 它必须隐藏 Form 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>

我也试过这个。这是通过在表单之间切换来实现的，但是如果打开了表单，则单击相同的按钮不会关闭(切换)表单。顺便说一句，这个脚本适用于 Bootstrap 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>