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

处理mouseover的代码以id overlay为目标元素。第二个选项卡的ID为overlay1。一个解决方案是在您的JS处理mouseenter事件的第一部分中向图形和目标类添加一个类。