Javascript将内容加载到div中

Question

我试图制作一个页面，根据图片地图中的点击将自定义内容加载到div中。

这只是部分代码，但问题是当我点击ID为piece的链接时，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>