JavaScript 如何控制元素可見性以獲得更好的使用者體驗？

JavaScript 隱藏/顯示元素：增強使用者體驗

在 Web 開發中，通常需要動態顯示或隱藏頁面上的元素。 JavaScript 提供了強大的 API，使您能夠控製互動式使用者介面元素的可見性。

點擊後隱藏元素

考慮以下HTML 程式碼，其中「編輯」 " 連結用於顯示可編輯的文字區域：

<a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
<span></span>

隱藏「編輯」連結後點擊後，您可以修改showStuff()函數以隱藏連結：

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the link
    btn.style.display = 'none';
}

隱藏文字與元素

此外，您可能想要隱藏點擊「編輯」連結時的「Lorem ipsum」文本。函數中包含一個附加參數來引用包含文本的元素：

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

並且在HTML 代碼中：

<span></span>

當單擊“編輯”鏈接，文本區域和“Lorem ipsum」文字都將被隱藏，為使用者提供無縫體驗。

以上是JavaScript 如何控制元素可見性以獲得更好的使用者體驗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！