如何基於另一個DIV內容的可見性顯示DIV內容

Question

我在頁面上一起顯示了以下DIV元素：

<div><a href="javascript:;" id="awesome-button" style="visibility:hidden">This Link Shows Up First</a></div>

<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;"><a href="javascript:;" onclick="someFunction();">This is the value that should show up after the link above is clicked.</a></div>

如您所見，“ This Link Shows Up First文本最初在頁面加載時顯示。 我有以下javascript，用於確定用戶是否單擊了“ This Link Shows Up First文本。 目標是顯示。如果隱藏了awesome-button則這This is the value that should show up after the link above is clicked div。

custom.valueAwesome = function() {
var awesomeButton = document.getElementById('awesome-button');
awesomeButton.style.visibility = 'hidden';
document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';
gadash.executeCommandQueue();
};

我已經測試了此腳本，當用戶單擊鏈接時，它已成功將showUpAfterAwesomeButtonIsClicked鏈接的狀態更改為隱藏。 這使我相信，需要更新的連接與此行有關：

document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';

我已經嘗試了這條線的幾種變體。 有沒有更好的方法來達到這個結果？ 謝謝。

Answer 1

您不能在CSS中設置id屬性。 實際上，它必須是xml標記上的屬性。 更改

<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;">

至

<div id="showUpAfterAwesomeButtonIsClicked" style="display:none; ">

這將允許您的document.getElementById實際選擇它。