如何在单击按钮时隐藏表单

斯里哈里

我试图隐藏表单，并在单击按钮时显示必要的表单。但是javascript代码无法正常工作。jfiddle链接：https ://jsfiddle.net/5d28uLkL/
请改正错误（如果有）

HTML：

<div class="nav">
<button href="#" data-category-type="high">CRSS</button>

<button href="#" data-category-type="low">TUBU</button>


<div id="Categories">

<div class="container" data-category-type="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" data-category-type="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>

JAVASCRIPT：

    $('.nav a').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();
});

阿什温

只需为使用的按钮提供ID，然后将其链接到js。

HTML：

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

JS：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。