Javascript 如何在单击按钮时隐藏窗体

我试图隐藏表单并在单击按钮时显示必要的表单。但是javascript代码不起作用。 jfiddle链接：
如果有错误，请改正

HTML:

---

将您的javascript编辑为此

$('.nav button').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"]').show();
    $('#Categories > div[data-category-name="'+nam+'"]').show();
});

编辑您的javascript

$('.nav button').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('category-type');
    var nam = $(this).data('category-type');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"]').show();
    $('#Categories > div[data-category-name="'+nam+'"]').show();
});

你的工作链接

---

您将

.data（）

参数放错了

代码中有许多错误。我相信应该是这样的：

Html:

我对html和js代码做了一些更改，并对js代码做了一些评论。

---

我希望它能帮助你

下面是一些适用于HTML的内容

它获取单击按钮的

索引

，以决定要显示的

.container

$（'.nav按钮'）。在（'click'，函数（e）上{
var thisButtonEq=$（this.index（）；
$（“.container”）.hide（）.eq（thisButtonEq.show（）；
})

CRSS
图布
铬带

公司名称


联系人


电话

发送答案
管

公司名称


联系人


电话

发送答案

嘿，您选择了错误的选择器。。 使用此

$（'.nav按钮'）

而不是

$（'.nav a'）

刚刚选中..工作正常..并且

没有

href

。删除该选项

---

谢谢

只需给出所用按钮的id，并将它们链接到js即可

Html:

$('.nav button').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"]').show();
    $('#Categories > div[data-category-name="'+nam+'"]').show();
});

$('.nav button').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('category-type');
    var nam = $(this).data('category-type');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"]').show();
    $('#Categories > div[data-category-name="'+nam+'"]').show();
});

<div class="nav">
  <button href="#" class="switch" data-category-type="high">CRSS</button>
  <button href="#" class="switch" data-category-type="low">TUBU</button>
  <div id="Categories">
    <div class="container high">
      <div class="fs-form-wrap" id="fs-form-wrap">
        <div class="fs-title">
          <h1>CR Strips</h1>
        </div>
        <form id="myform" class="fs-form fs-form-full" autocomplete="off">
          <ol class="fs-fields">
            <li>
              <label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label>
              <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/>
            </li>
            <li>
              <label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label>
              <input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/>
            </li>
            <li>
              <label class="fs-field-label fs-anim-upper" for="q3">Phone</label>
              <input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/>
            </li>
          </ol>
          <!-- /fs-fields -->
          <button class="fs-submit" type="submit">Send answers</button>
        </form>
        <!-- /fs-form -->
      </div>
      <!-- /fs-form-wrap -->
    </div>
    <div class="container low">
      <div class="fs-form-wrap" id="fs-form-wrap1">
        <div class="fs-title">
          <h1>TUBE</h1>
        </div>
        <form id="myform" class="fs-form fs-form-full" autocomplete="off">
          <ol class="fs-fields">
            <li>
              <label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label>
              <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/>
            </li>
            <li>
              <label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label>
              <input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/>
            </li>
            <li>
              <label class="fs-field-label fs-anim-upper" for="q3">Phone</label>
              <input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/>
            </li>
          </ol>
          <!-- /fs-fields -->
          <button class="fs-submit" type="submit">Send answers</button>
        </form>
        <!-- /fs-form -->
      </div>
      <!-- /fs-form-wrap -->
    </div>
  </div>
</div>

//here you've got wrong selector
$('.nav button.switch').on('click', function(e) {
  e.preventDefault();
  var cat = $(this).data('category-type'); //here you get class of your container from data attribute on button.
  $('#Categories > div').hide(); //hide all
  $('#Categories > div.' + cat).show(); //show selected
});

<button id="high" href="#" data-category-type="high">CRSS</button>
<button id="low" href="#" data-category-type="low">TUBULAR COMPONENTS</button>

$('#high').on('click',function(){
     $('#fs-form-wrap').show();
     $('#fs-form-wrap1').hide();
 });
  $('#low').on('click',function(){
     $('#fs-form-wrap1').show();
     $('#fs-form-wrap').hide();
 });