如何在html中隐藏内容？

我有一个主要用于K-12学校的网站。我在上面有一些社交媒体按钮，比如Facebook的“like”和Pinterest的“pinit”。然而，我想把这些按钮隐藏起来……在这里你必须点击一次某个东西（比如一个覆盖它们但点击后消失的图像……或者一个滚动显示按钮背后的标签）。 这是因为这些网站通常在学校被屏蔽（我意识到我可能对此无能为力），而这些按钮被屏蔽时看起来有点难看（在这些情况下会显示问号或其他东西来代替按钮）。但是，我确实希望那些没有阻止它们的人能够轻松访问和查看它们

---

我正在寻找一个简单的解决方案，在你点击某个东西之前，按钮不会立即可见

如果您使用JQuery或任何其他支持库，即使有很多视觉效果，也有很多方法可以实现您的目标

无论如何，实现它的最简单方法是通过使用元素的“display”属性

将此添加到html头标记中：

<script type="text/javascript>

    function showElement(){
       // get a reference to your element, or it's container
       var myElement = document.getElementById('elementId');
       myElement.style.display = '';
       hideImage();
    }

    function hideImage(){
       var myElement = document.getElementById('imageId');
       myElement.style.display = 'none';
    }

</script>

---

谢谢你的帮助！我试过这个，效果很好。我认为这是一个非常简单的解决方案（尽管我不懂javascript），并且实现了我想要做的事情，即基本上隐藏这些按钮，直到单击覆盖它们的图像。仅供记录，以下是我使用的确切代码：

<script type="text/javascript">
    function showElement(){
        var myElement = document.getElementById('elementId');
    myElement.style.display = '';
    hideImage();
    }

    function hideImage(){
    var myElement = document.getElementById('imageId');
    myElement.style.display = 'none';
    }
</script>


函数showElement（）{
var myElement=document.getElementById（'elementId'）；
myElement.style.display=''；
hideImage（）；
}
函数hideImage（）{
var myElement=document.getElementById（'imageId'）；
myElement.style.display='none'；
}

（我所做的更改是在第一行添加缺少的引号，并删除了关于引用元素的那一行，因为我假设这是可选的。）对于html部分，我所做的就是：

<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>


（隐藏内容在此处）

（除了关闭图像标签、输入图像的尺寸等之外，我在这一部分也没有做太多更改）希望我没有做错任何一件事，但它似乎按照预期工作。另外一个很好的触摸方式是，当你将鼠标悬停在它上面时，如果有一种方法可以让它显示“用手指指的手”符号……为了清楚地表明它是一个可点击的图像，但如果没有，这不是必要的
 如果你想让JavaScript根据用户的点击显示/隐藏，你需要它。我不确定你改变css类是什么意思，或者这会做什么，但我只是在寻找最简单的解决方案。其他人向我建议如下：“将要显示/隐藏的内容放在…..标记中，并通过JavaScript控制元素的隐藏/显示。”我对JavaScript一无所知，但这是一个有效的解决方案吗？（还有，我如何接受前面问题的答案？）我认为最简单、最直接的解决方案是我建议的。使用css类，您可以创建一个类，例如（.hide{display:none}），然后添加它以隐藏元素，或者删除它以显示元素。若要接受，请单击答案左侧的勾号：）因此…我不太清楚您提出的解决方案将实现什么…用户必须先单击某个内容才能看到隐藏的内容？在您的问题中，您说您需要一个元素（如图像），当单击时，将隐藏自身并显示隐藏的内容（例如，您的按钮）。因此，在我的示例中，图像是“img”，按钮容器是“div”。单击图像以隐藏它并显示按钮：）我不确定您所说的“如果您想在默认情况下隐藏“隐藏”元素，请添加一个内联样式”……这不是我要做的重点吗？无论如何，我想我会尝试一下，但我只是想确保我做得正确另一条评论：我认为使用javascript是唯一真正的解决方案，它可以让用户点击图像以发现内容，而且你提到的css想法不会达到同样的目的。无论如何，再次谢谢你。
<div>
   <img id="imageId" alt="" src="..." onclick="showElement()">
   <div id="elementId" style="display:none">
      <!-- your buttons, anchors or anything else you want to be hidden by default-->
   </div>
</div>

<script type="text/javascript">
    function showElement(){
        var myElement = document.getElementById('elementId');
    myElement.style.display = '';
    hideImage();
    }

    function hideImage(){
    var myElement = document.getElementById('imageId');
    myElement.style.display = 'none';
    }
</script>

<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>