Question

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

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

我在[https://jsfiddle.net/hoq0djwc/][2]找到了提示，但是当我尝试将每个部分放在一个单独的div上时，右列文本会显示为nomore。

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

你们有人可以帮助我吗？

Answer 1

简单来说，这可以称为标签行为。使用href填充标签的id并隐藏所有内容并仅显示受尊重的标签：

＆＃13;

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

＆＃13;

* {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;}

＆＃13;

<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>

＆＃13;

使用Pure CSS版本：

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

拥有相同的课程。
提供唯一的id。
确保遵循链接。
id应与href匹配。

＆＃13;

* {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;}

＆＃13;

<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>

＆＃13;

两列，单击左侧显示右侧的结果

1 个答案: