I have a set of tabs on my website, and I want the first tab to be automatically selected when the page loads. I tried using some Javascript code from w3schools, which worked in a simulator, but now it's not working on my actual site, and it looks terrible.
Here is the relevant part of the code that I used:
document.getElementById("defaultOpen").click();
function openTab(evt, tabName, boxName) {
var i, tabcontent, tablinks;
var box = document.getElementById(boxName);
tabcontent = box.getElementsByClassName("sg-tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = box.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" sg-current", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " sg-current";
}
<div class="code-tabs">
<button class="tablinks" onclick="openTab(event, 'disp-Deck','code-box-1')" id="defaultOpen" style="background-color:#FF8B53">Deck</button>
<button class="tablinks" onclick="openTab(event, 'disp-Hand','code-box-1')" style="background-color:#FF8B53">Hand</button>
<button class="tablinks" onclick="openTab(event, 'disp-Field','code-box-1')" style="background-color:#FF8B53">Field</button>
<button class="tablinks" onclick="openTab(event, 'disp-Graveyard','code-box-1')" style="background-color:#FF8B53">Graveyard</button>
<button class="tablinks" onclick="openTab(event, 'disp-Banished','code-box-1')" style="background-color:#FF8B53">Banished</button>
<div class="spacer"></div>
</div>
<pre id="disp-Deck" class="sg-tab-content">
<p><mark>Deck!</mark></p>
</pre>
EDIT: Removed the website link since the issue has been resolved, and I'm continuing work on my site :)
This code is still a work-in-progress for someone who is new to web development. Even though I followed all the instructions I could find, it's still not functioning properly. Any suggestions?