當使用JavaScript點擊不同的按鈕時，不同的窗體會在同一頁面上顯示

Question

我有兩個按鈕說CITIZEN和POLICE。當我點擊按鈕CITIZEN時，我想在同一頁面上顯示一個表示CITIZEN_FORM的表單。當我點擊POLICE按鈕時，我想在同一頁面上顯示一個表單POLICE_FORM。

如何使用JavaScript和HTML做到這一點？

Answer 1

類似的東西？：

<script> 
    $("input").click(function(){ 
     var mode = $(this).val(); 
     if(mode == "citizen"){ 
      $("#form_citizen").css("display", "block"); 
      $("#form_police").css("display", "none"); 
     }else if (mode == "police"){ 
      $("#form_citizen").css("display", "none"); 
      $("#form_police").css("display", "block"); 
     } 
    }); 
</script> 


<div id="panel"> 
    <input type="button" name="citizen" value="citizen" /> 
    <input type="button" name="police" value="police" /> 
</div> 

<form id="form_police">....</form> 
<form id="form_citizen">...</form> 

但實際上計算器是不是「我 - 不要 - 訣竅到寫我的代碼，請-DO-它換我「網站。 你應該自己嘗試一下，如果你失敗了，我們會幫助你。

我剛剛編寫了一個簡短的幫助，使用jQuery來處理樣式。

格爾茨

Answer 2

這應該爲你

HTML工作： -

<form id = "policeForm" action="" style="display:none"> 
    <input type="submit" value="Police Form"> 
</form> 
<form id = "citizenForm" action="" style="display:none"> 
    <input type="submit" value="Citizen Form"> 
</form> 
<button id= "citizenBtn" onclick="showForm('citizenForm')">citizen</button> 
<button id="police" onclick="showForm('policeForm')">police</button> 

的Javascript

var showForm = function(id){ 
    document.getElementById(id).style.display = ''; 
} 

Answer 3

Here's a simple JSFiddle。

只隱藏窗體開始，並添加事件監聽器到你的按鈕來顯示有問題的表單。在這裏，我躲他們點擊後的按鈕，因爲這似乎是有道理的這種應用的...

HTML：

<button id="a">Form A</button><button id="b">Form B</button> 
<form id="a_form" name="a" style="display:none;"> 
    <input name="a_input" value="A: type here"/> 
    <input type="submit"/> 
</form> 
<form id="b_form" name="b" style="display:none;"> 
    <input name="b_input" value="B: type here"/> 
    <input type="submit"/> 
</form> 

的Javascript：

var a=document.getElementById('a'); 
var b=document.getElementById('b'); 
a.addEventListener('click',function(){ 
    a.style.display="none"; 
    b.style.display="none"; 
    document.getElementById('a_form').style.display=""; 
}); 
b.addEventListener('click',function(){ 
    a.style.display="none"; 
    b.style.display="none"; 
    document.getElementById('b_form').style.display=""; 
});