我在一個名為Anki的應用程式中使用了這段代碼，這是一個可以幫助我記住新單詞的抽認卡應用程式。我有這段代碼，當我點擊它時會寫一段文字，它顯示了我在添加新卡時添加的提示欄位的內容，
{{#Hint}}
<div id="hint" class="hidden">
<p class="trigger">[ click to show hint ]</p>
<p class="payload">{{Hint}}</p>
</div>
<script>
var hint = document.getElementById('hint');
hint.addEventListener('click', function() { this.setAttribute('class', 'shown'); });
</script>
{{/Hint}}
例如，我想要的只是將上面該文本的功能寫入具有此代碼樣式的按鈕。
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Green */
</style>
</head>
<body>
<button class="button button1">Green</button>
</body>
</html>
我希望當我第一次按下按鈕時，它會向我顯示提示欄位的內容，而當我第二次按下它時，它會隱藏它，依此類推......
提前致謝
uj5u.com熱心網友回復：
如果我理解正確，您想在每次連續點擊時添加和洗掉某些特定的 css 類嗎？
在這種情況下，切換類將執行以下操作：
hint.addEventListener('click', function() { hint.classList.toggle("shown"); });
例如，css 可以是這樣的：
#hint .payload {display: none};
#hint.shown .payload {display: block}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338616.html
標籤：javascript html css 安琪
下一篇：標題隨注冊表一起向下移動