两列，点击左边显示结果在右边

Question

我想创建两个div。一个在左侧包含标题，另一个在右侧包含相对于每个标题的一些文本。

我也想让它像http://www.francefilierepeche.fr/projets/carte-interactive-projets/但左边的是可点击的文本或div，而不是地图。

我已经找到了关于[https://jsfiddle.net/hoq0djwc/][2]的提示，但当我试图将每个部分放在一个单独的div上时，右侧的列文本不会出现。

我只能使用html和css，因为我想在drupal页面中显示这一点。

你们中有谁能帮我吗？

Answer 1

从简单意义上讲，这可以称为选项卡行为。使用href填充选项卡的id，隐藏所有内容，只显示相关内容：

$(function () {
  $(".item").hide();
  $(".col-12:first-child a").click(function () {
    $(".item:visible").hide();
    $($(this).attr("href")).show();
    return false;
  });
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
h3 {font-weight: 600; margin: 0 0 10px;}
.cols {overflow: hidden;}
.cols .col-12 {width: 50%; float: left;}
ul li, ul li a {display: block;}
ul li a {padding: 5px 10px; text-decoration: none;}
ul li a:hover {background-color: #ccf;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div class="cols">
  <div class="col-12">
    <h3>Left</h3>
    <ul>
      <li><a href="#item-1">Item 1</a></li>
      <li><a href="#item-2">Item 2</a></li>
      <li><a href="#item-3">Item 3</a></li>
      <li><a href="#item-4">Item 4</a></li>
      <li><a href="#item-5">Item 5</a></li>
    </ul>
  </div>
  <div class="col-12">
    <h3>Right</h3>
    <div class="item" id="item-1">Item 1 Content</div>
    <div class="item" id="item-2">Item 2 Content</div>
    <div class="item" id="item-3">Item 3 Content</div>
    <div class="item" id="item-4">Item 4 Content</div>
    <div class="item" id="item-5">Item 5 Content</div>
  </div>
</div>

使用纯CSS版本：

这与您自己的代码相同。我可能会提出一些改变，比如：

• 上同样的课
• 给出唯一的id
• 请确保已遵循链接
• id应与href匹配

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
h3 {font-weight: 600; margin: 0 0 10px;}
.cols {overflow: hidden;}
.cols .col-12 {width: 50%; float: left;}
ul li, ul li a {display: block;}
ul li a {padding: 5px 10px; text-decoration: none;}
ul li a:hover {background-color: #ccf;}
.item {display: none;}
.item:target {display: block;}

<div class="cols">
  <div class="col-12">
    <h3>Left</h3>
    <ul>
      <li><a href="#item-1">Item 1</a></li>
      <li><a href="#item-2">Item 2</a></li>
      <li><a href="#item-3">Item 3</a></li>
      <li><a href="#item-4">Item 4</a></li>
      <li><a href="#item-5">Item 5</a></li>
    </ul>
  </div>
  <div class="col-12">
    <h3>Right</h3>
    <div class="item" id="item-1">Item 1 Content</div>
    <div class="item" id="item-2">Item 2 Content</div>
    <div class="item" id="item-3">Item 3 Content</div>
    <div class="item" id="item-4">Item 4 Content</div>
    <div class="item" id="item-5">Item 5 Content</div>
  </div>
</div>