How can I re-enable a tab after clicking a button?

Community
1

So, I’ve been working on this thing for a few hours now, only because I’ve been stuck on this one problem that has occurred. The website consists of 4 tabs; Home, Tab1, Tab2 and Tab3 (Tab1-3 are yet to be named). I have managed to disable the Tabs 1-3, but I want to disable them after the click of a button. How would I do this?
Here’s my code so far:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial;
}
.disabled {
  background-color: #777
  color: white;
  cursor: none;
}

.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

.tablink:hover {
    background-color: #777;
}

.tabcontent {
    color: black;
    display: none;
    padding: 100px 20px;
    height: 100%;
}

#Home {background-color: white;}
#Inventory {background-color: white;}
#Map {background-color: white;}
#Save {background-color: white;}
</style>
</head>
<body>

<button class="tablink" onclick="openPage('Home', this, 'orange')"
id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('Tab1', this, 'orange')" disabled>Tab1</button>
<button class="tablink" onclick="openPage('Tab2', this, 'orange')" disabled>Tab2</button>
<button class="tablink" onclick="openPage('Tab3', this, 'orange')" disabled>Tab3</button>

<div id="Home" class="tabcontent">
</div>
<div id="Tab1" class="tabcontent">
</div>
<div id="Tab2" class="tabcontent">
</div>
<div id="Tab3" class="tabcontent">
</div>

<script>
function openPage(pageName,elmnt,color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(pageName).style.display = "block";
    elmnt.style.backgroundColor = color;
    }
document.getElementById("defaultOpen").click();

</script>
</body>
</html>

Thanks,
Tom