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。一个解决方案是在两个数字中添加一个 class，并在你处理 mouseenter 事件的 JS 的第一部分中将 class 作为目标。

JavaScript 无法处理单个 HTML 页面上的所有选项卡

JavaScript not working on all tabs on single HTML page

javascript

css

html

jquery-ui-tabs