点击图片时打开 Span 标签

Question

单击特定图像时，我需要打开、显示和关闭其他 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>

Answer 1

工作正常 - 如果您只包含 jQuery（您还没有完成，但有人为您编辑了它）

嗯，关于“打开跨度标签”的意思还有一个悬而未决的问题，但我假设show。

编辑：

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

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

作为替代方案，您可以在单击项目时切换外部p 的可见性。请参阅下面的 sn-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>