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的第一部分中处理mouseenter事件的目标。