显示和隐藏 div 的区域标签

Question

我有一个区域地图，当我单击特定区域时，我想显示与该选择相对应的某个 div。 IE。如果您在地图中单击 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

因为您的 area 标记具有与 div id 匹配的属性（项目），您可以简单地执行此操作...

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

Example

Answer 2

你的代码有很多错误。

试试这个：

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