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

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

我希望这就是你想要的

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

 .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; } 

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