如何根据地图区域单击显示/隐藏不同的表格内容

Question

我正在尝试根据您点击的区域显示包含不同内容的表格。

例如，如果我点击A（地图区域），我只想看到有关A的信息。如果我点击B（地图区域），我只想看到有关B的信息。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<map class="list-group" name="map">
  <area id="section-1" class="list-group-item" shape="rect" coords="198,368,142,337" href="#section-1" />
</map>

<img alt="Picture1" src="http://via.placeholder.com/680x466/444444/DDDDDD?text=Placeholder" width="680" height="466" usemap="map" data-cms="{'contentId':95875}" />

<table class="hide section-1" style="margin-left: auto; margin-right: auto;">
  <tbody>
    <tr>
      <th>
        <strong>Name&nbsp;</strong>
      </th>
      <th>
        <strong>&nbsp;Surname</strong>
      </th>
      <th>
        <strong>Addressf&nbsp;</strong>
      </th>
      <th>
        <strong>Postecode</strong>&nbsp;
      </th>
    </tr>
    <tr>
      <td>test&nbsp;</td>
      <td>test&nbsp;</td>
      <td>test&nbsp;</td>
      <td>test&nbsp;</td>
    </tr>
  </tbody>
</table>

$(function() {
  $('.list-group a').on('click', function(e) {
    e.preventDefault();
    $('.hide').hide();
    $('.' + this.id).show();
  });
});

这是小提琴https://jsfiddle.net/or17ny60/

Answer 1

我希望这就是你想要的

＆＃13;

＆＃13;

$(function() {
  $('.list-group area').on('click', function(e) {
    e.preventDefault();
    $('.hide').hide();
    $('.' + this.id).show();
  });
});

＆＃13;

.list-group {
  min-height: 300px;
  min-width: 300px;
  display: block;
  position: relative;
}

.list-group area {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.list-group #section-1 {
  left: 0;
  background: #0F0;
}

.list-group #section-2 {
  left: 50%;
  background: #00F;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<map class="list-group" name="map">
  <area id="section-1" class="list-group-item" shape="rect" coords="198,368,142,337" href="#section-1" />
  <area id="section-2" class="list-group-item" shape="rect" coords="198,368,142,337" href="#section-2" />
</map>

<!-- <img alt="Picture1" src="http://via.placeholder.com/680x466/444444/DDDDDD?text=Placeholder" width="680" height="466" usemap="map" data-cms="{'contentId':95875}" /> -->

<table style="margin-left: auto; margin-right: auto;">
  <tbody>
    <tr>
      <th>
        <strong>Name&nbsp;</strong>
      </th>
      <th>
        <strong>Surname&nbsp;</strong>
      </th>
      <th>
        <strong>Addressf&nbsp;</strong>
      </th>
      <th>
        <strong>Postecode&nbsp;</strong>
      </th>
    </tr>
    <tr class="hide section-1">
      <td>test a</td>
      <td>test a</td>
      <td>test a</td>
      <td>test a</td>
    </tr>
    <tr class="hide section-2">
      <td>test b</td>
      <td>test b</td>
      <td>test b</td>
      <td>test b</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;