-4

我有一個表格裏面包含一個用戶填寫表格。在div上方是一個顯示「客戶信息」的按鈕。我只想在客戶要填寫信息時才顯示錶格。這個想法是，如果他們想填寫它們，他們可以點擊按鈕，表格將出現在下面。這些部分有很多，所以我只希望客戶必須看到他們想看到的內容。下面是一個例子...只有單擊按鈕時，如何才能在窗體上顯示div？

<input type="button" value="Customer Info" onClick=""> 
<div> 
<form> 
<table> 
<tr> 
<td>Name:<input type="text" value="" id="name" name="name"></td> 
</tr> 
</table> 
</div>

我的問題是我怎麼能寫一個簡單的JavaScript函數，將在點擊按鈕，將顯示和隱藏DIV的行動？表單仍然會在那裏隱藏，值將只是空白。

來源

2013-04-24 AB Bryan

這個問題並沒有表現出任何的研究工作。 **做你的作業很重要**。告訴我們你發現了什麼，***爲什麼它不符合你的需求。這表明你已經花時間去嘗試幫助你自己了，它使我們避免重申明顯的答案，最重要的是它可以幫助你得到更具體和相關的答案。 [FAQ]（http://stackoverflow.com/questions/how-to-ask）。 – 2013-04-24 15:24:13

這是一個我需要幫助的入門級問題，請在評論時考慮您的幫助。簡單地通過問題會更快，請注意所有已發佈的有用答案。還要注意，其中構成這個問題的一些辯論本身就是有價值的。 – 2013-04-24 15:42:32

可以使用onClick事件要做到這一點：

Working Example

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>

來源

2013-04-24 15:27:15

好的，但你真的推薦內聯事件處理程序？考慮到問題的簡單性，您可能還想添加'script'標籤。而駱駝套的'onclick'是必要的（不止）？ – 2013-04-24 15:28:41

@DavidThomas更新，只爲你;） – 2013-04-24 15:32:12

和最後投票，爲這個變化。 – 2013-04-24 15:36:52

行內JavaScript被認爲是不好的做法

即。 onClick=""

使用這樣的事情，而不是

<input id="info" type="button" value="Customer Info"> 
<div id="myDiv"> 
    <form>Name: 
     <input type="text" value="" id="name" name="name"> 
     </input> 
    </form> 
</div> 

var button = document.getElementById("info"); 
var myDiv = document.getElementById("myDiv"); 

function show() { 
    myDiv.style.visibility = "visible"; 
} 

function hide() { 
    myDiv.style.visibility = "hidden"; 
} 

function toggle() { 
    if (myDiv.style.visibility === "hidden") { 
     show(); 
    } else { 
     hide(); 
    } 
} 

hide(); 

button.addEventListener("click", toggle, false);

上jsfiddle

這是在評論由大衛·托馬斯提出的代碼。它執行完全相同的任務，但對於toggle函數使用if-else的速記，並且不提供單獨的show和hide函數。

<input id="info" type="button" value="Customer Info"> 
<div id="myDiv"> 
    <form>Name: 
     <input type="text" value="" id="name" name="name"> 
     </input> 
    </form> 
</div> 

var button = document.getElementById("info"); 
var myDiv = document.getElementById("myDiv"); 

function toggle() { 
    myDiv.style.visibility = myDiv.style.visibility === "hidden" ? "visible" : "hidden"; 
} 

toggle(); 

button.addEventListener("click", toggle, false);

上jsfiddle

來源

2013-04-24 15:35:20 Xotic750

爲什麼不只是'toggle（）'函數，只需一個簡單的切換？ 'myDiv.style.visibility = myDiv.style.visibility =='可見'？'hidden'：'visible';' – 2013-04-24 15:40:26

沒有特別的原因，除非很明顯，OP不知道如何執行這些操作。對於缺乏經驗的人來說，速記如果不清晰，用戶可能會改變主意，而且他們可以輕鬆地使用所有3種功能。這個例子只是許多可能的解決方案之一。 – Xotic750 2013-04-24 15:45:19

<script type="text/javascript"> 
$("#music").click(function() { 
$("#musicinfo").show("slow"); 
}); 
</script>

您可以在榜眼秀的樣改變效果切換，fadeToggle ...

來源

2013-05-08 10:07:01 Arun

只有單擊按鈕時，如何才能在窗體上顯示div？

回答

Working Example

相關問題