Last Updated on 2021-12-19 by Clay
今天要記錄的，是如何透過點擊一段文字來顯示另一段『隱藏起來的文字』。實作的方法非常單純，是事先設定好 <style> 中的 visibility 屬性，並透過 javascript 的腳本來進行切換。
實作方法真的非常簡單，可以直接看下方的範例程式碼。
範例程式碼
<style> 區塊中的是 CSS、<body> 區塊中的是 HTML 語法、<style> 中的自然是 JavaScript。
<html>
<style>
.popup {
cursor: pointer;
}
.popup .popuptext {
visibility: hidden;
}
.popup .show {
visibility: visible;
}
</style>
<body>
<div class="popup" onclick="show()">Click Here!
<span class="popuptext" id="popup_text">This is a hidden message!</span>
</div>
</body>
<script>
function show() {
var popup = document.getElementById("popup_text");
popup.classList.toggle("show");
}
</script>
</html>
Output: