While I may not have a direct answer to your question, I want to offer an alternative approach that is compatible with classic Edge and other modern browsers.
Although there might be better methods for marking up and styling these tabs, I decided to stick with the markup you provided as a starting point. This approach may not align exactly with what you were hoping for, but it could still be beneficial in exploring relevant issues (such as separating styling from JavaScript).
In my solution, I relied heavily on CSS for styling and aimed to streamline the JavaScript functionality. Typically, I try to avoid applying styles directly to elements using JS unless there is a specific requirement that mandates such an approach. While this is generally considered a best practice, there may be reasons unknown to me for why you implemented it that way.
Wishing you the best of luck with your project.
function openCity(evt, cityName) {
var i, tabcontent;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
var toggleTabs = function (e) {
var active = document.querySelector('.active');
if (active) {
active.classList.remove('active');
}
e.currentTarget.classList.add('active');
}
var tablinks = document.querySelectorAll(".tablinks");
var tablinksSet = Array.from(tablinks);
tablinksSet.forEach(function (item) {
item.addEventListener('click', function (e) {
toggleTabs(e);
})
})
}
body {
font-family: Sans-serif;
background-color: white;
}
/* Style the tab */
.tab {
position: relative;
border-style: solid;
border-width: 1px;
border-color: #ccc #ccc transparent #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
margin-top: -1px;
border: 1px solid transparent;
outline: none;
cursor: pointer;
padding: 16px 16px;
transition: 0.3s;
font-size: 17px;
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #ccc;
}
/* Change background color of buttons on hover */
.tab button:hover {
/*background-color: #ddd;*/
}
/* Create an active/current tablink class */
.tab button.active {
position: relative;
background-color: white;
border: 1px solid #ccc;
border-bottom-color: white;
}
.tab button.active::after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: -2px;
left: 0;
background-color: white;
z-index: 50;
}
.tab button:first-child {
margin-left: -1px;
}
.tab button:not(.active):first-child {
border-left-color: #ccc;
}
.tabcontents {
width: 500px;
float: left;
}
/* Style the tab content */
.tabcontent {
position: relative;
z-index: 1;
display: none;
padding: 6px 12px;
margin-top: -1px;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #ccc #ccc #ccc #ccc;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.container {
width: 500px;
}
<!DOCTYPE html>
<html>
<head></head>
<body onload="openCity(event, 'London')">
<div class="container">
<div class="tab cf">
<button id="one" class="tablinks active" onclick="openCity(event, 'London')">London</button>
<button id="two" class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button id="three" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div class="tabcontents">
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</div>
</body>
</html>