如何使用图像映射来显示/隐藏特定的div？

我有一个图像映射，并希望能够根据我点击的图像映射中的哪个项目显示/隐藏div？

HTML …

  
You clicked the Republic of Texas! 

jquery到目前为止…

 $("#texas").hide(); $("???").click(function(){ $("#texas").show(); } 

我想我想从地图中抓取“item”标签，或类似的东西，然后用它来知道要显示的div。 但是我不确定如何打电话。 此外，我甚至不确定这是否是最好的方式，所以任何建议将不胜感激。

这是一个小提琴 ！

谢谢！！！

Answer 1

您必须更改图像映射规范。 像这样：

然后在你的jQuery中，你有一个语法错误，你需要绑定地图，如下所示：

编辑：

 $("map#usaMap").click(function(ev){ var target = $(ev.target); var targetId = target.attr('id'); if(targetId == 'texasArea') { $("#texas").show(); } }); 

检查我为你构建的UPDATED JSFiddle 。

Answer 2

其他人发布了类似的答案。 我不确定为什么它被删除了。 它似乎工作：

 $('[item="texas"]') 

这是一个例子：

   
You clicked the Republic of Texas!
 
You clicked Florida! 

 $('[item="texas"]').click(function(){ $(".display").hide(); $("#texas").show(); return false; }); $('[item="florida"]').click(function(){ $(".display").hide(); $("#florida").show(); return false; }); 

http://jsfiddle.net/xtKXL/5/

编辑：

为了使事情更加动态，你可以从你正在hover的

抓取“item”并使用该值来显示相应的

：

 $('[item]').click(function(){ var item=$(this).attr('item'); $(".display").hide(); $("#"+item).show(); return false; }); 

http://jsfiddle.net/xtKXL/6/