如何根据另一个 DIV 内容的可见性显示 DIV 内容

How to Display DIV Contents Based Upon Visibility of Another DIV Contents

本文关键字：DIV 可见性 显示 内容 何根 另一个      更新时间：2023-09-26

我在页面上同时显示了以下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 clickeddiv。

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 = '';

我已经尝试了这条线的几种变体。 有没有更好的方法来达到这个结果？ 谢谢。

不能在 CSS 中设置 id 属性。它实际上需要是 xml 标记上的一个属性。改变

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

自 

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

这将允许你的document.getElementById实际选择它。

相关文章：