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的第一部分中將該類作為目標。