Question

如下图所示，我有两个表单和两个按钮。目前所有表格都是可见的。

我如何才能“根据他们选择的选项（从顶部的蓝色按钮）显示所要求的表格”？

enter image description here

因此，如果用户点击了“发送邀请”按钮，则会显示已发送的邀请表单，蓝色按钮将消失“您可以通过单击后退按钮返回”。

是否可以使用JS实现动态ID专用来实现这一目标？因为我在某些页面上会有两个以上的选项... 例如，给<a class="button button-box"><p>Send an invite</p></a>一个id“＃send-and-invite-form”，然后它会找到包含该ID并显示它。然后隐藏包含这些框的div，直到再次单击。

这是一个简化的HTML结构：

<div>
                <a class="button button-box"><p>Send an invite</p></a>
                <a class="button button-box"><p>Add manually</p></a>
            </div>

            <form data-parsley-validate>
                <fieldset>
                    <div>
                        <input name="" type="email" placeholder="Email address" required>
                    </div>
                </fieldset>
                <div class="dialog-buttons">
                    <button class="button-green" type="submit">Submit</button>
                    <a>Back</a>
                </div>
            </form>

            <form data-parsley-validate>
                <fieldset>
                    <div>
                        <input name="" type="email" placeholder="Email address" required>
                    </div>
                </fieldset>
                <div class="dialog-buttons">
                    <button class="button-green" type="submit">Submit</button>
                    <a>Back</a>
                </div>
            </form>

Answer 1

首先保留两种表单hidden并为每个<a>以及<form>

提供ID

然后

$("#id-of-btn1").click(function(){
   $("#form-1").toggle();
});

和

$("#id-of-btn2").click(function(){
   $("#form-2").toggle();
});

编辑：这可以是使其完全独立于ID / Classes的解决方案。

如果你给一个包含所有<a>然后

的div的类

$(".class-of-div a").click(function(){
     var t=$(this).index();
     $("body").find("form").hide();
     $("body").find("form:eq("+t+")").toggle();
});

这仅适用于相应的<a>和<form>，因此请确保按顺序排列。

Answer 2

您可以在:target伪选择器的帮助下实现此目的。这是纯CSS解决方案：

form {
    display: none;
}
form:target {
    display: block;
}

<div> <a class="button button-box" href="#send-and-invite-form"><p>Send an invite</p></a>
 <a class="button button-box" href="#add-manually"><p>Add manually</p></a>

</div>
<form id="send-and-invite-form" data-parsley-validate>
    Invite
    <fieldset>
        <div>
            <input name="" type="email" placeholder="Email address" required />
        </div>
    </fieldset>
    <div class="dialog-buttons">
        <button class="button-green" type="submit">Submit</button> <a>Back</a>

    </div>
</form>

<form id="add-manually" data-parsley-validate>
    Manually
    <fieldset>
        <div>
            <input name="" type="email" placeholder="Email address" required />
        </div>
    </fieldset>
    <div class="dialog-buttons">
        <button class="button-green" type="submit">Submit</button> <a>Back</a>
    </div>
</form>

也可以预先选择默认标签，但是它需要更改表单的顺序并使用棘手的选择器：

form, form:target ~ #send-and-invite-form {
    display: none;
}
#send-and-invite-form, form:target {
    display: block;
}

演示：http://jsfiddle.net/dfsq/5633tu4c/

Answer 3

.show{display:block;}
.hide{display:none;}

 <a class="button button-box" id="lnkInvite" ><p>Send an invite</p></a>
 <a class="button button-box" id="lnkManually"><p>Add manually</p></a>

<form data-parsley-validate class="hide">Send an Invite Form</form>
<form data-parsley-validate class="hide">Add manually form</form>


<script type="text\javascript">

$().ready(function(){

$("#lnkInvite").click(function(){
       /*Toggle the show hide css class*/
});

$("#lnkManually").click(function(){
  /*Toggle the show hide css class*/
});

});


</script>

Answer 4

Simmple solution using js and style attributes.

<html>
        <head>
        <script>
        function showhide1(){
        document.getElementById("form1").style.display='block';
        document.getElementById("form2").style.display='none';
        }

        function showhide2(){
        document.getElementById("form2").style.display='block';
        document.getElementById("form1").style.display='none';
        }
        </script>
        </head>
        <body>
        <div>
                        <a class="button button-box" onclick="showhide1()"><p>Send an invite</p></a>
                        <a class="button button-box" onclick="showhide2()"><p>Add manually</p></a>
                    </div>

                    <form data-parsley-validate id="form1" >
                        <fieldset>
                            <div>
                                <input name="" type="email" placeholder="Email address1" required>
                            </div>
                        </fieldset>
                        <div class="dialog-buttons">
                            <button class="button-green" type="submit">Submit</button>
                            <a>Back</a>
                        </div>
                    </form>

                    <form data-parsley-validate id="form2">
                        <fieldset>
                            <div>
                                <input name="" type="email" placeholder="Email address" required>
                            </div>
                        </fieldset>
                        <div class="dialog-buttons">
                            <button class="button-green" type="submit">Submit</button>
                            <a>Back</a>
                        </div>
                    </form> 

                    <script>

                    document.getElementById("form2").style.display='none';
                    document.getElementById("form1").style.display='none';
                    </script>       
                    </body>
                    </html>

Answer 5

保持两个表单都隐藏，直到单击每个表单的按钮。单击相应按钮将显示所需的表单并隐藏按钮。点击返回隐藏表单并再次显示该按钮。

我为邀请部分实施了。您还必须实施手册，但希望这可以指出您正确的方向。另外，我跳过了jQuery，但显然这是你的选择。

CSS

  .hidden{
    display: none;
    }

HTML

<div> <a id="inviteButton" class="button button-box"><p>Send an invite</p></a></div>
<form id="inviteForm" class="hidden">
    <fieldset>
        <div>
            <input name="" type="email" placeholder="Email address" required>
        </div>
    </fieldset>
    <div class="dialog-buttons">
    <button class="button-green" type="submit">Submit</button> <a id="backButtonInvite">Back</a></div>
</form>

的Javascript

var inviteButton = document.querySelector("#inviteButton");
var inviteForm = document.querySelector("#inviteForm");
var backButtonInvite = document.querySelector("#backButtonInvite");

inviteButton.addEventListener("click", function () {
    inviteForm.classList.toggle("hidden");
    this.classList.toggle("hidden");
});

backButtonInvite.addEventListener("click", function () {
    inviteForm.classList.toggle("hidden");
    inviteButton.classList.toggle("hidden");
});

这是the fiddle。

使用JS仅显示请求的表单

5 个答案: