Javascript将内容加载到div中

我正在尝试创建一个页面，根据图像映射中的单击将自定义内容加载到div中

这只是代码的一部分，但问题是当我单击ID为dec的链接时，ID为dec的div中的内容没有改变

我尝试过普通链接和许多其他技术，但似乎无法让它工作

感谢所有的帮助

  <map name="cake_01Map">
    <area shape="poly" coords="249,246,250,25,130,46,249,246" href="#" alt="Desember" id="dec">
    <area shape="poly" coords="365,47,250,246,252,23" href="#" alt="Januar" id="jan">
    <area shape="poly" coords="448,134,252,251,368,49" href="#" alt="Februar" id="feb">
  </map>

<div class="container">
<div class="row">
    <div class="col c4" id="piece">Content here</div>

<div>
    <img src="img/kake_01.png" alt="" width="500" height="500" usemap="#cake_01Map" id="cake_01" />
    <img src="img/kake_02.png" width="500" height="500" alt="" usemap="#cake_01Map" id="cake_02" />
</div>

</div>
</div>

<script>

$('#dec').click(function() {
  $('#piece').html('Content December');
});

$('#jan').click(function() {
  $('#piece').html('Content January');
});

$('#feb').click(function() {
  $('#piece').html('Content February');
});
</script>

---

工件id是唯一的-这是正确的。试试$'piece'。随便什么；您为mepiece编写的代码可能是唯一的，但dec、jan、feb不是唯一的，并且在usemaps中使用了两次。您是否包含了jQuery？它可以正常工作。您确定已经包含jquery吗？因为这就是您的代码正在使用的内容，在dom准备好之后是否调用它？