Question

我有一张区域地图，当我点击特定区域时，我想显示与该选择对应的某个div。即如果你点击地图上的square1，它将显示div1。如果单击square2，它会隐藏div1并显示div2。到目前为止，我无法获得预期的结果。如果有更好的方法可以解决我的问题，我愿意接受建议。

<map name="FPMap0" id="FPMap0">
<area item="first" href="#" shape="polygon" coords="347, 79, 349, 201, 449,   248, 540, 204, 541, 82, 448, 34" />
<area item="second" href="#" shape="polygon" coords="560, 81, 562, 206, 660, 255, 756, 208, 758, 81, 659, 31"/>
</map>

<img width="1000" height="667" src="picture.png" usemap="#FPMap0" alt=""/>

<div id="first">Text1</div>
<div id="second">Text2</div>

<script>
  $("map#FPMap0").click(function(ev){
  var target = $(ev.target);
  var targetId = target.attr('id');
  if(targetId == 'first') {
    $("#first").show();
  } else if(targetId=='second') {
    $("#second").show();
  }
  });
</script>

Answer 1

您的代码中存在很多错误。

试试这个：

$( document ).ready(function() {
    $('#first, #second').hide();
$("map[name=FPMap0] area").on('click', function () {
    var target = $(this).attr('item');
    if (target == 'first') {
        $('#second').hide();
        $("#first").show();
    } else if (target == 'second') {
        $('#first').hide();
        $("#second").show();
    }
});
});

JSFiddle Demo

Answer 2

由于您的area代码具有与div id匹配的属性（item），因此您只需执行此操作即可...

$('area').on('click',function() {
    $('div').hide();
    $('#' + $(this).attr('item')).show();
});

Example

要显示和隐藏div

2 个答案: