Question

我有一个主要用于K-12学校的网站。我有一些社交媒体按钮就像Facebook'喜欢'和Pinterest'pin it'。但是，我想隐藏这些按钮....你需要点击一下某些东西（比如一个覆盖它们的图像但是在点击时消失了......或者一个只是滚动的标签）揭示它背后的按钮）。这样做的原因是因为这些网站通常在学校被封锁（我意识到我可能无法做到这一点）这些按钮在被阻挡时看起来很丑陋（它会显示问号或其他某些东西）在这些情况下的按钮）。但是，我确实希望没有阻止它们的人能够轻松访问和查看它们。

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

Answer 1

如果您正在使用JQuery或任何其他支持库，即使有很多视觉效果，您也可以通过很多方式实现目标。

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

在html head标签中添加：

<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>

现在，在要用于显示隐藏内容的元素上添加点击事件：

<img id="imageId" onclick="showElement()" src="..."/>

如果要默认隐藏“隐藏”元素，请添加内联样式：

<div id="elementId" style="display:none">...your buttons here...</div>

显然，有很多更好的方法可以实现它（例如，改变css类），但我认为你可以使用上述指令。

编辑改善答案：

创建如下所示的HTML结构：

<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>

因此，当您单击图像时，按钮出现，图像消失。

Answer 2

感谢您的帮助！我试过这个并且效果很好。我认为这是一个非常简单的解决方案（即使我不知道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>

（我改变的是在第一行添加了缺少的引号，并取出了关于引用元素的那一行，因为我认为这是可选的。）对于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>

（除了关闭图像标签，放入图像的尺寸等之外，我在这方面没有太大的改变。）希望我没有做任何这个错误，但它似乎工作如意。唯一可能是一个很好的触摸的东西是，如果有一种方法可以让它在你的鼠标悬停在它上面时出现'手指指针'符号....为了清楚它是一个可点击的图像，但如果没有，它不是必需的。

如何在html中隐藏内容？

2 个答案: