使用图像映射显示和隐藏 div 个元素

Question

到目前为止，这是我的代码..

我希望只有在用户单击蓝色圆圈等时才会向用户显示蓝色文本...

我想我只需要更改 div 元素的属性，但我对 jQuery 不太满意并且不确定最优雅的方法。

HTML

<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" usemap="#test1" alt="" />
<map id="primarytest" name="test1">
  <area shape="circle" coords="50,75,50" href="#" item="red"/>
  <area shape="circle" coords="150,75,50" href="#" item="blue"/>
  <area shape="circle" coords="250,75,50" href="#" item="yellow"/> 
</map>

<div class="one" style="display:none" id="redtext">
<h5>
HelloRed
</h5>
</div>
<div class="one" style="display:none" id="bluetext">
<h5>
HelloBlue
</h5>
</div>
<div style="display:none" id="yellowtext">
<h5>
HelloYellow
</h5>
</div>

jQuery

$('[item="red"]).click(function() {
$(".one").hide();
    $("#redtext").show();
    return false;
});

Answer 1

您当前的代码只是缺少选择器上的结束引号和 fiddle 中的 jQuery。解决这些问题后它会起作用：

Updated fiddle

也就是说，您可以通过遵循 DRY 原则来改进逻辑。为此，您可以在 area 元素上放置一个公共 class 以及一个 data 属性来指定在单击时应显示哪个元素。然后，您可以对所有这些事件使用一个事件处理程序。试试这个：

<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" usemap="#test1" alt="" />
<map id="primarytest" name="test1">
    <area shape="circle" coords="50,75,50" href="#" class="circle" data-target="redtext" />
    <area shape="circle" coords="150,75,50" href="#" class="circle" data-target="bluetext" />
    <area shape="circle" coords="250,75,50" href="#" class="circle" data-target="yellowtext" />
</map>

<div class="one" id="redtext">
    <h5>HelloRed</h5>
</div>
<div class="one" id="bluetext">
    <h5>HelloBlue</h5>
</div>
<div class="one" id="yellowtext">
    <h5>HelloYellow</h5>
</div>

$('.circle').click(function(e) {
    e.preventDefault();
    $(".one").hide().filter('#' + $(this).data('target')).show();
});

Example fiddle

使用图像映射显示和隐藏 div 个元素

Use image maps to show and hide div elements

jquery

html

imagemap