Question

我的网站上有一张图片，我希望人们能够点击它并在其下方显示信息？像隐藏信息一样，它在单击图像时出现，但在第二次单击图像时消失。

到目前为止，代码中唯一的部分就是图像代码：

<img src="info.jpg">

谢谢你们！

詹姆斯

Answer 1

您食谱的成分是onclick event（javascript）和display property（css）。

Answer 2

如果您使用的是jQuery，可以使用以下代码：

<img src="info.jpg" onclick="$('#info').toggle()" /><br />
<div id="info" style="display:none">Information about your picture </div>

使用常规JavaScript可以执行此操作：

<img src="info.jpg" onclick="info();" /><br />
<div id="info" style="display:none">Information about your picture </div>
<script type="text/javascript">
function info(){
var currently = document.getElementById('info').getAttribute('style');
    if (currently != 'display:none')
        document.getElementById('info').setAttribute('style', 'display:none');
    else
        document.getElementById('info').setAttribute('style', 'display:block');
};
</script>

当然，对于常规javascript，您必须确保它是您设置的唯一内联样式，或者进一步解析信息。此外，您可以使用显示块以外的其他内容。

我喜欢使用另一个单独的选项是工具提示。

Answer 3

使用锚标记使图像成为链接，并使用div显示或隐藏信息。希望有所帮助

点击页面上的按钮，信息会下降到它下面？

3 个答案: