Question

我想从四个互联网浏览器的图像地图中打开手风琴。因此，如果有人点击Firefox，它会在Firefox部分下打开手风琴。目前，如果有人点击图像映射中的四个浏览器中的一个，它会将它们跳转到手风琴中的链接，但它不会打开。然后他们必须自己点击链接。

我尝试了第一条指令on this page，但我无法让它发挥作用。我是javascript的新手，所以它可能只是用户错误。非常感谢任何帮助。

这是HTML

<!--begin accordion-->  

<a id="IE"></a><button class="accordion">Internet Explorer</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<a id="Firefox"></a><button class="accordion">Firefox</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<a id="Chrome"></a><button class="accordion">Chrome</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<a id="Safari"></a><button class="accordion">Safari</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<!--end accordion-->`

地图

 <p class="browers"><img src="_assets/browsers.jpg" alt="Top Internet   Browsers" width="375" height="94" usemap="#Map">
    <map name="Map">
    <area shape="rect" coords="13,11,82,86" href="#IE" target="_self" alt="Internet Explorer">
    <area shape="rect" coords="104,12,176,85" href="#Firefox" target="_self" alt="Firefox">
    <area shape="rect" coords="198,12,269,85" href="#Chrome" target="_self" alt="Chrome">
    <area shape="rect" coords="288,13,360,83" href="#Safari" target="_self" alt="Safari">
    </map>
  </p>

THE SCRIPT

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

Answer 1

您可以将onclick属性添加到图像映射中的形状。

 <p class="browers"><img src="_assets/browsers.jpg" alt="Top Internet   Browsers" width="375" height="94" usemap="#Map">
    <map name="Map">
    <area onclick="activateAccordion('IE')" shape="rect" coords="13,11,82,86" href="#IE" target="_self" alt="Internet Explorer">
    <area onclick="activateAccordion('Firefox')" shape="rect" coords="104,12,176,85" href="#Firefox" target="_self" alt="Firefox">
    <area onclick="activateAccordion('Chrome')" shape="rect" coords="198,12,269,85" href="#Chrome" target="_self" alt="Chrome">
    <area onclick="activateAccordion('Safari')" shape="rect" coords="288,13,360,83" href="#Safari" target="_self" alt="Safari">
    </map>
  </p>

从图像地图

1 个答案: