javascript切換按鈕來打開和關閉div

如何讓我的切換按鈕不僅可以從視圖更改名稱來隱藏，而且還可以顯示我在div標記中的表格？javascript切換按鈕來打開和關閉div

目前，我有我的腳本如下：

<script type = "text/javascript"> 
function buttonToggle(where,pval,nval) 
{ 
     where.value = (where.value == pval) ? nval : pval; 

} 
</script>

，這是該按鈕的代碼：

<input type="button" name="button1" id="nextbt" value="View " onclick="buttonToggle(this,'View ','Hide ')">

來源

2011-03-08 phil

你能解釋一下更深入的你想完成什麼？也許是一個例子？ – amosrivera 2011-03-08 21:54:08

當頁面加載時，按鈕會說視圖，表格會隱藏在div中。當按鈕被點擊時，它會切換到隱藏狀態，表格會顯示出來。當點擊隱藏時，表將消失，按鈕將返回查看 – phil 2011-03-08 22:19:49

你會想改變div的style.visible到visible或hidden，和/或將style.display設置爲block或none。

參見：http://w3schools.com/css/css_display_visibility.asp

來源

2011-03-08 21:56:51

因爲它是表格，所以不應將'display'屬性設置爲'table'而不是'block'？ – Chris 2011-03-08 21:59:28

@Rfvgyhn：'display'屬性處理div如何呈現，並且不關心它包含的內容。 'display'可以設置爲'block'，'inline'或'none'。沒有'桌子'。 – 2011-03-08 22:09:28

有：https：//developer.mozilla.org/en/CSS/display但我認爲這不會有很大的不同。 – 2011-03-08 22:11:45

喜歡的東西：

function buttonToggle(where,pval,nval) { 
    var display = where.value === nval ? 'none' : 'block'; // or 'table' 
    document.getElementById('yourTableId').style.display = display; 
    where.value = (where.value == pval) ? nval : pval; 
}

或者更好：

function buttonToggle(source, target, show_val, hide_val) { 
    var display = source.value === hide_val ? 'none' : 'block'; // or 'table' 
    target.style.display = display; 
    source.value = (source.value == show_val) ? hide_val : show_val; 
}

和而不是增加自己的點擊處理程序內嵌，使用JavaScript：

document.getElementById('nextbt').onclick = (function() { 
    var table = document.getElementById('yourTableId'); 
    return function() { 
     toggleButton(this, table, 'View', 'Hide'); 
    }; 
}());

來源

2011-03-08 21:57:52

使用jQuery。看到演示http://jsfiddle.net/nBJXq/2/

來源

2011-03-08 21:59:06 Mahesh

除此之外，它沒有要求jQuery，你至少可以在你的答案中發佈你的代碼。否則，這是一個非常糟糕的答案。 – 2011-03-08 22:12:49

@Felix Kling，是什麼讓我的答案很差？即使jQuery沒有被問到，我們也應該推薦使用它。如果提問者提到「沒有jQuery」，我甚至不會嘗試這個答案。嘗試提供更多。 – Mahesh 2011-03-08 22:23:11

如果您的鏈接因任何原因而在未來中斷，該怎麼辦？沒有鏈接的答案本身並不是每一個都有幫助。並且不要理所當然地認爲鏈接將始終有效。 – 2011-03-08 22:25:52

那麼，如果你可以使用jQuery這將是非常容易的：

$('#nextbt').click(function() { 
    if ($(this).attr('value') == 'show') { 
     $(this).attr('value', 'hide'); 
     $('#myotherdiv').slideDown(); 
    } else { 
     $(this).attr('value', 'show'); 
     $('#myotherdiv').slideUp(); 
    } 

    // or if you don't care about changing the button text, simply: 
    $('#myotherdiv').slideToggle(); 
});

這裏更多：http://api.jquery.com/slideToggle/

來源

2011-03-08 21:59:39

沒有jQuery，它也很容易;） – 2011-03-08 22:02:58

比方說，你添加你想要顯示/隱藏的表id該rel屬性按鈕：

<input type="button" name="button1" id="nextbt" 
     rel="myTable" value="View " 
     onclick="buttonToggle(this,'View ','Hide ')"> 

<table id="myTable"> 
    <tr> 
     <td>myTable</td> 
    </tr> 
</table>

然後，你可以添加以下到您的buttonToggle功能：

function buttonToggle(where, pval, nval) { 
    var table = document.getElementById(where.attributes.rel.value); 
    where.value = (where.value == pval) ? nval : pval; 
    table.style.display = (table.style.display == 'block') ? 'none' : 'block'; 
}

See example.

來源

2011-03-08 22:04:24 mVChr

javascript切換按鈕來打開和關閉div

回答

相關問題