如何在单击时切换 div 中的内容并更改另一个 div 中的内容

Question

所以这是一个家庭装修网站.. 我有 2 列，左侧我想要每个属性的缩略图，右侧是属性 images/description 将在属性的缩略图时显示的位置单击.. 但同时我还希望它在单击的缩略图下切换 div 以显示迷你 "before" 和 "after" 缩略图。我希望这些仅在单击缩略图时显示，并在再次单击或单击另一个属性的缩略图时消失，当然还有属性的前后图片显示在下面...我可以用 css 和 jquery 来完成这部分，我找到了一种方法来根据单击的图像更改 div 中的内容..但我似乎无法同时做这两件事....

我希望我解释的是对的...

做了一个 jsfiddle 东西 https://jsfiddle.net/jeni/g1dhocyw/

这是我用来切换前后照片的css

.collapse{
font-size: 31px;
display:block;
}
.collapse + input{
display:none;
}
.collapse + input + *{
display:none;
}
.collapse+ input:checked + *{
display:block;
}

我找到了一个 jsfiddle 并弄乱了它所以它做了我想要的...... http://jsfiddle.net/jeni/8eqsbhet/ 但是当我尝试将它合并到我的其他 jsfiddle 时 css 东西没有工作

咳咳。

Answer 1

将复选框更改为单选框。

<input id="_1" type="radio" name="xyz">...

并将值为“_2”的最后一个 "for" 和 "id" 更新为“_3”。

<label class="collapse" for="_3">

<input id="_3" type="radio" name="xyz">

在此处查看修订：https://jsfiddle.net/3kqq2yx5/

更新：

修改为 jQuery 代码：https://jsfiddle.net/3kqq2yx5/2/

如何在单击时切换 div 中的内容并更改另一个 div 中的内容

How to toggle content in a div and change content in another div, on click

html

javascript

css

jquery

onclick