单击图像时打开“跨度”标记

Open Span tag on image click

本文关键字：跨度 标记 图像 单击      更新时间：2023-09-26

当我单击其特定图像时，我需要打开、显示和关闭其他span标记。

$("#img1").on('click', function() {
  $("#div1").fadeIn();
  $("#div2,#div3").fadeOut();
});
$("#img2").on('click', function() {
  $("#div2").fadeIn();
  $("#div1,#div3").fadeOut();
});
$("#img3").on('click', function() {
  $("#div3").fadeIn();
  $("#div1,#div2").fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="css/imagens/missao2.png" alt="missao" id="img1" />
<img src="css/imagens/missao2.png" alt="missao" id="img2" />
<img src="css/imagens/missao2.png" alt="missao" id="img3" />
<span id="div1" style="display:none;position:absolute;border:3px solid blue;">Span 1</span>
<span id="div2" style="display:none;position:absolute;border:3px solid blue;">Span 2</span>
<span id="div3" style="display:none;position:absolute;border:3px solid blue;">Span 3</span>

如果您只包含jQuery（您没有这样做，但有人为您编辑了它），效果很好

关于"打开span标签"是什么意思，还有一个悬而未决的问题，但我假设show

编辑：

我从评论中看到，您的代码位于样式为display:none的p中。这将不起作用，因为整个块将被隐藏/不显示，包括其中的任何元素。跳过包装中的display:none（外部p）！

<p class="txt_h"><!-- code here is fine --></p>

或者，单击项目时可以切换外部p的可见性。请参阅下面的片段。

$('#showthings').click(function() {
  $('.txt_h').show();
});
$("#img1").on('click', function() {
  $("#div1").fadeIn();
  $("#div2,#div3").fadeOut();
});
$("#img2").on('click', function() {
  $("#div2").fadeIn();
  $("#div1,#div3").fadeOut();
});
$("#img3").on('click', function() {
  $("#div3").fadeIn();
  $("#div1,#div2").fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="showthings">Click to show images</span>
<p class="txt_h" style="display:none;">
<img src="css/imagens/missao2.png" alt="missao" id="img1" />
<img src="css/imagens/missao2.png" alt="missao" id="img2" />
<img src="css/imagens/missao2.png" alt="missao" id="img3" />
   
<span id="div1" style="display:none;position:absolute;border:3px solid blue;">DIV1</span>
<span id="div2" style="display:none;position:absolute;border:3px solid blue;">DIV2</span>
<span id="div3" style="display:none;position:absolute;border:3px solid blue;">DIV3</span>
</p>

相关文章：