JavaScript无法在单个HTML页面的所有选项卡上运行

Question

因此，我正在一个网站上工作，该网站应该只有很少的交互式图片地图，您可以将其悬停在该地图上并显示信息。但是我遇到的问题是我的Javascript不能在页面上的所有选项卡上使用，它只能在第一个选项卡上使用，而我不知道为什么。我首先以为是因为我两次调用了地图和叠加层ID，但是我通过添加map1和overlay1来进行了更改，从而没有重叠。

     $('area').each(function(){
        var area = $(this),
            alt = area.attr('alt');
		area.mouseenter(function(){
            $('#overlay').html(alt);
        }).mouseleave(function(){
		    $('#overlay').html('');

		});
	});
    
    function openEmail(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
    document.getElementById(cityName).style.display = "block";
     evt.currentTarget.className += " active";

    }	

    
    #map {
        position: relative;
    }
    #overlay {
        position: absolute;
        background: #000;
        color: #fff;
        top: 20px;
        left: 20px;
    }

    #map1 {
        position: relative;
    }

    #overlay1 {
        position: absolute;
        background: #000;
        color: #fff;
        top: 20px;
        left: 20px;
    }		

    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }				
   
			

<figure class = "tab">
    <button class = "tablinks" onclick = "openEmail(event, 'phishing')">Classic Phishing</button>
  <button class = "tablinks" onclick = "openEmail(event, 'ceo-scam')">CEO Scam</button>
</figure>

<figure id = "phishing" class = "tabcontent">

  <!-- where the phishing map is -->
  <figure id = "map">
      <figure id = "overlay"></figure>
    <img src = "" width = "805" height = "531" alt = "classic-phishing" usemap = "#phishingmap" />	
  </figure>
  <!-- map with the coordinates and the alt that text is displayed -->
  <map name = "phishingmap">
    <area href = "" alt="You need to check where the email originated from since anybody can spoof an email address." title="" shape="rect" coords="74,29,261,51"/>
    </map>
</figure> 
<figure id = "ceo-scam" class = "tabcontent">
    <!-- where the phishing map is -->
  <figure id = "map1">
    <figure id = "overlay1"></figure>
    <img src = "" width = "860" height = "400" alt = "ceo-scam" usemap = "#ceomap" />	
  </figure>
  <!-- map with the coordinates and the alt that text is displayed -->
  <map name = "ceomap">
    <area href = "" alt="This looks like an email within the company, however you need to be careful with anything you receive. Always check email headers to see where an email actually originated from." title="from-boss" coords="85,32,261,58" shape="rect"/>
    </map>
</figure>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

处理鼠标悬停的代码以ID为overlay的元素为目标。第二个标签的ID为overlay1。一种解决方案是在图形上都添加一个类，并在处理鼠标事件的JS的第一部分中将该类作为目标。