Итак, я работаю над веб-сайтом, на котором, как предполагается, есть небольшие интерактивные карты с картинками, на которые можно навести курсор, и на них будет отображаться информация.Но проблема в том, что мой 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>