单击图像后在图像下方添加文本[关闭]答案

【问题标题】：adding a text below an image after clicking on it [closed]单击图像后在图像下方添加文本[关闭]
【发布时间】：2015-09-19 09:16:19
【问题描述】：

我是 HTML 初学者我有一个任务是在点击图片后在图片下方添加文字

我正在尝试这个

<a href="hh.jpg">
<img src="hh.jpg" width="100" figcaption="has">
</a>

但我的任务需要 2 页才能完成。我必须在一页中完成。为了完成我的任务。谁能指导我怎么做...？

【问题讨论】：

不，因为它是我们的第一类 html

标签： html

【解决方案1】：

以下是不使用 JavaScript 而是使用 CSS 的方法。

input {
    display: none;
}
span#content {
    display: none;
}
input#show:checked ~ span#content {
    display: block;
}

<label for="show">
    <span>
        <img src="https://i.imgur.com/g3D5jNz.jpg" width="100" figcaption="A cat yesterday"/>
    </span>
</label>
<input type=radio id="show" name="group">
<span id="content">This is a caption</span>

注意：代码改编自this previous answer。

【讨论】：

【解决方案2】：

这是一种按照您的要求仅使用 HTML 的方法。 a 的 href 应该定位锚点，然后添加 CSS 样式以仅在选择 target 伪类时显示目标位置。

<style>
    #display { display: none; }
    #display:target { display: block; }
</style>
<a href="#display">
    <img src="hh.jpg" width="100" figcaption="has" />
</a>
<div id="#display">Show this text</div>

【讨论】：

@hussainsaifuddin - 如果它对您有帮助，请随时投票，如果它解决了您的问题，请接受它。这有助于其他人了解哪些答案可能有所帮助，以及是否有任何答案解决了您的问题。它还可以提高您的声誉。

【解决方案3】：

如果您了解 javascript，这可以帮助您；如果没有，那么如果你想做一些你想做的事情，你至少必须学习基础知识。在您的 <header> 标记内，插入以下 javascript 代码：

           function addtext(){
            document.getElementById('displaytext').innerHTML='THis is a text';
            }

然后在你的 img 标签内，添加这个事件：onclick='addtext();' 然后删除你的锚标签在您的 img 标签后添加此标签：<span id='displaytext'></span>

您的代码应如下所示：

                <html>
                <head>
                <script>
                    function addtext(){
                        document.getElementById('displaytext').innerHTML='THis is a text';
                       }
                   </script>
                   </head>
                   <body>
                  <img src="hh.jpg" width="100" figcaption="has" onclick='addtext();>
                  <br>
                  <span id='displaytext'></span>
                  </body>
                  </html>

【讨论】：