javascript - 如何在html中使用两个按钮显示两个表单

Question

我想创建一个允许用户在数据库中创建 key 的页面。为此，用户必须首先在两个按钮之间进行选择。每个按钮显示不同的形式。

我的问题是下一个:我可以使用显示ONE 表单的ONE 按钮。这是来自 https://stackoverflow.com/a/16196022/12533349 的代码:

HTML:

<button id="some_id">Hide div</button>

<form id="some_form">

<form>

javascript:

<script type="text/javascript">
    var theButton = document.getElementById('some_id');

    theButton.onclick = function() { 
        document.getElementById('some_form').style.visibility='hidden';   
    }

</script>

但我想做的是下一件事:如果用户点击button_a，它会显示form_a，如果他点击button_b，但form_a> 被显示，form_a 被隐藏，form_b 被显示。 我希望它或多或少是可以理解的......

在结束这篇文章之前，我想补充一点:我使用 BootStrap 4 构建我的 webapp。

Answer 1

你可以用这样的东西。

var form1 = document.getElementById('form1');
var form2 = document.getElementById('form2');
// Hide the two forms when the page loads
form2.style.display = "none";
form1.style.display = "none";

// Create a function that shows and hides the forms
function showForm(x){
if(x==1){ /* Check what form should be shown */
form1.style.display = "block";
form2.style.display = "none";
}else if(x==2) {
form1.style.display = "none";
form2.style.display = "block";
}
}

<button onclick="showForm(1)">Form 1</button><button onclick="showForm(2)">Form 2</button>
<form id="form1">
<h3>Form 1</h3>
Example 1: <input placeholder="Example"/>
</form>
<form id="form2">
<h3>Form 2</h3>
Example 2: <input placeholder="Example"/>
</form>

在上面的代码中，我使用了style.display，但您也可以使用style.visibility。