javascript - CSS/Javascript/Jquery：显示/隐藏一个 DIV 取决于被点击的两个图像之一

Question

我有 2 张图片，Image_A 和 Image_B。我还有 2 个 Div，Div_A 和 Div_B，它们在页面加载时都是隐藏的。

如果单击 Image_A，那么我需要显示 Div_A。但是然后单击 ig Image_B 我需要隐藏 Div_A 并显示 Div_B。

这也应该以另一种方式工作，因此只有一个 div 显示是否单击图像

这只能用纯css来实现吗？或者如果我用 Javascript/Jquery 来做？？？

谢谢

Answer 1

$('#img_1').on('click', function() {
  $('#div_1').show();
  $('#div_2').hide();
});

$('#img_2').on('click', function() {
  $('#div_1').hide();
  $('#div_2').show();
});

Answer 2

您可以在 Javascript 或 Jquery 中执行此操作，方法是为每个图像放置事件处理程序并更改调用函数中 div 的可见性。

不确定是否在纯 CSS 中执行此操作。

Answer 3

您可以将您的 CSS 设置为；

#img_1, #img_2{
visibility: hidden;
}

在你的 JavaScript 中；

$('#img_1').click(function() {
  $('#div_1').css({"visibility":"visible"});
  $('#div_2').css({"visibility":"hidden"});
});

$('#img_2').click(function() {
  $('#div_2').css({"visibility":"visible"});
  $('#div_1').css({"visibility":"hidden"});
});

这是一个工作演示。