[英]How to show/hide different table content based on map area click
我試圖根據您單擊的區域顯示具有不同內容的表。
例如,如果我單擊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 </strong>
</th>
<th>
<strong> Surname</strong>
</th>
<th>
<strong>Addressf </strong>
</th>
<th>
<strong>Postecode</strong>
</th>
</tr>
<tr>
<td>test </td>
<td>test </td>
<td>test </td>
<td>test </td>
</tr>
</tbody>
</table>
$(function() {
$('.list-group a').on('click', function(e) {
e.preventDefault();
$('.hide').hide();
$('.' + this.id).show();
});
});
我希望這就是你想要的
$(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 </strong> </th> <th> <strong>Surname </strong> </th> <th> <strong>Addressf </strong> </th> <th> <strong>Postecode </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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.