2

我有一个主要用于 K-12 学校的网站。我有一些社交媒体按钮，比如 Facebook 的“点赞”和 Pinterest 的“pin it”。但是，我希望隐藏这些按钮....您必须在其中单击一次某些内容（例如覆盖它们但单击时消失的图像...或只是滚动的选项卡以显示其背后的按钮）。这样做的原因是因为这些网站通常在学校被封锁（我意识到我可能对此无能为力）并且这些按钮在被封锁时看起来有点难看（它会显示一个问号或其他东西在这些情况下的按钮）。但是，我确实希望没有阻止它们的人能够轻松访问和查看它们。

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

4

2 回答 2

2

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

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

在你的 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>

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

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

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

于 2012-11-19T15:12:06.323 回答
0

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

（除了关闭图像标签、输入图像尺寸等之外，我在这部分并没有太大变化。）希望我没有做错任何事情，但它似乎按预期工作。唯一的另一件事是，如果有一种方法可以让它在您将鼠标悬停在它上面时出现“用手指指向的手”符号......为了清楚地表明它是可点击的图像，但如果不是，则不是必需的。

于 2012-11-22T21:34:19.173 回答