如何創建在同一頁面上顯示更多文本的HTML按鈕

Question

我正在使用html和javascript。 我的問題是，在一個網頁上顯示一個圖和幾個按鈕。 當用戶按下任何一個按鈕時，我需要顯示3個或4個選項，但要在同一頁面上顯示而不切換頁面。 下面是我的代碼

<form action="MyPage">
    <button type="submit" value="More Options">
</form>

重定向到其他頁面。我該怎么辦？

Answer 1

首先，擺脫type =“ submit”。 這就是導致頁面執行您不想要的事情的原因。 第二件事是添加一個onclick處理程序。 它應該返回false以避免類似“提交”的行為。 變量“ this”會將按鈕傳遞給函數，您可能需要在該代碼中使用該按鈕。 然后用代碼填充addMoreStuff（）的正文，以添加更多內容！

<form action="MyPage">
    <button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>

<script type="text/javascript">
function addMoreStuff(button) {
    /* your code here */
}
</script>

Answer 2

刪除表單（僅使用按鈕），然后查看jQuery。 它非常易於使用，並且可以幫助您快速構建應用程序代碼。

的HTML

<button type="submit" value="More Options" id="more">

JavaScript（jQuery）

// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)

function add_options() {
    //code here to add more options
}