Jquery 使用图像贴图显示和隐藏div元素

这是到目前为止我的代码

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

我想我只需要更改div元素的属性，但我对jQuery不是很熟悉，也不确定最优雅的方法

HTML

---

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

也就是说，您可以通过遵循枯燥的原则来改进逻辑。为此，您可以在

区域

元素上放置一个公共类以及

数据

属性，以指定单击时应显示的元素。然后，您可以在所有事件处理程序上使用单个事件处理程序。试试这个：

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

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

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