HTML中的開關可以是一個很有用的特性。它可以幫助我們在不需要額外的JavaScript代碼的情況下,隱藏或顯示元素。接下來我們會討論如何使用HTML設置隱藏開關。
<div id="switch"> <p>這是要隱藏的元素。</p> <button onclick="toggleElement()">隱藏/展示</button> </div> <script> function toggleElement() { var elem = document.getElementById("switch"); if(elem.style.display == "none") { elem.style.display = "block"; } else { elem.style.display = "none"; } } </script>
上面的代碼演示了如何使用開關來隱藏或顯示一個元素。我們首先使用一個id為"switch"的div作為元素的容器。在div內,我們定義了一個p標簽并賦予它要隱藏的文本內容。我們還添加了一個button元素,它的onclick事件會調用toggleElement()函數。
toggleElement()函數的作用是切換元素的顯示狀態。如果元素之前處于隱藏狀態,則設置為顯示。如果元素當前處于顯示狀態,則設置為隱藏。要查找該元素,我們使用document.getElementById()函數。
最后,我們添加了一個<script>標簽包裹我們的JavaScript代碼。這樣我們的代碼就可以在HTML文檔中被執行。
在本例中,我們使用了預定義標簽<pre>來包裹我們的代碼。這個標簽允許我們保留代碼中的所有空格和行尾,使得代碼更易于閱讀和復制。