Html CSS两个可点击的元素显示不同的内容

我需要一些css的帮助

我有两个可点击的文本区域（如下面的代码笔）。如果我单击第一个，则需要显示第一个文本和img，如果我单击第二个文本字段，则需要显示第二个文本和img

我不明白。我太笨了

我只喜欢css。如果没有其他方法，JS也是可能的

.test{
浮动：左；
背景色：灰色；/*仅当处于活动状态时*/
保证金：5px；
填充物：5px；
}
.text1{
显示：块；
背景颜色：灰色；
}
.text2{
显示：无；
背景颜色：灰色；
}
.img1 img{
最大宽度：600px；}
.img2 img{
最大宽度：600px；
显示：无}

单击区域1
单击区域2
Lorem ipsum door sit amet，consetetur sadipscing eliter，sed diam nonumy eirmod temporal invidunt ut labour and dolore magna aliquyam erat，sed diam voluptua。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的
Lorem ipsum door sit amet，consetetur sadipscing eliter，sed diam nonumy eirmod temporal invidunt ut labour and dolore magna aliquyam erat，sed diam voluptua。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。

这应该是您想要的行为：

使用引导选项卡：

Lorem ipsum door sit amet，consetetur sadipscing eliter，sed diam nonumy eirmod temporal invidunt ut labour and dolore magna aliquyam erat，sed diam voluptua。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。


所有人都可以坐在一张桌子上，坐在另一张桌子上，坐在另一张桌子上。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。

下面是一个使用纯css的想法。 您可以通过媒体查询更改位置

.test{
浮动：左；
背景色：灰色；/*仅当处于活动状态时*/
保证金：5px；
填充物：5px；
}
.text1{
显示：块；
背景颜色：灰色；
}
.text2{
显示：无；
背景颜色：黄色；
}
.img1 img{
最大宽度：600px；}
.img2 img{
最大宽度：600px；
显示：无}
.亲戚{
位置：相对位置；
}
.tabContent{
显示：无；
位置：绝对位置；
顶部：30px；
左：0；
}
a、 测试：焦点+p.tabContent{
显示：内联；
}

Lorem ipsum door sit amet，consetetur sadipscing eliter，sed diam nonumy eirmod temporal invidunt ut labour and dolore magna aliquyam erat，sed diam voluptua。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter，sed diam
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Click Area 1</a></li>
  <li><a data-toggle="tab" href="#menu1">Click Area 2</a></li>
</ul>

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <div class="img1">
            <img src="https://smartphone-klinik.net/wp-content/uploads/2018/03/K1600_pexels-photo-572688.jpg">
        </div>
        <p class="text1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p> 
    </div>
  <div id="menu1" class="tab-pane fade">
      <div class="img2">
        <img src="https://smartphone-klinik.net/wp-content/uploads/2018/03/pexels-photo-534736.jpeg">
      </div>
      <p class="text1">
        aLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </p>
   </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>