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

你可以将你的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"});
});

这是一个工作演示。

Answer 3

你可以在Javascript或Jquery中做到这一点，方法是在每个图像中放置事件处理程序，并在调用的函数中更改div的可见性。

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