I’m a new user and a new coder just trying to make a portfolio site. I wanted my site to have tabs that would swap between content, but I cannot get the javascript to work at all.
I just ran with a template from w3schools and replaced it with the names of the classes/ids in my code. I was expecting for a normal usual tab function. What happens here is that all the content from the two tabs show up, and when you click any of the tabs it disappears until you refresh the page.
I apologize that the code isn’t minimal, I don’t actually know how much I can trim without losing context. If it matters, I ran this code on firefox
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Frogcroaks</title>
<link rel="stylesheet" href="master.css">
</head>
<body>
<div class="page">
<nav class="sidebar">
<img src="images/logo.png" alt="">
<button class="sidebar-button">
<a href="home.html">Home</a>
</button>
<button class="sidebar-button">
<a href="commissions.html">Commission</a>
</button>
<button class="sidebar-button">
<a href="about.html">About & Contact</a>
</button>
</nav>
<div class="content">
<nav class="page-tab">
<button class="tab" onclick="openGallery(event, 'character-design')">
Character Design
</button>
<button class="tab" onclick="openGallery(event, 'illustration')">
Illustration
</button>
</nav>
<div id="character-design" class="gallery-container gallery">
<img src="images/poufdesign1.png" alt="" class="gallery">
<img src="images/poufdesign2.png" alt="" class="gallery">
<img src="images/poufdesign3.png" alt="" class="gallery">
<img src="images/fairy-ring.png" alt="" class="gallery">
<img src="images/luminae.png" alt="" class="gallery">
<img src="images/griffoy.png" alt="" class="gallery">
<img src="images/pokemon.png" alt="" class="gallery">
</div>
<div id="illustration"
class="gallery-container gallery" style="display="none"">
<img src="images/eloa-growth2.png" alt="" class="gallery">
<img src="images/eloa-growth1.png" alt="" class="gallery">
<img src="images/seviper-zangoose.png" alt="" class="gallery">
</div>
</div>
</div>
<script>
function openGallery(evt, galleryName) {
// Declare all variables
var i, gallery, tab;
gallery = document.getElementsByClassName("gallery");
for (i = 0; i < gallery.length; i++) {
gallery[i].style.display = "none";
}
tab = document.getElementsByClassName("tab");
for (i = 0; i < tab.length; i++) {
tab[i].className = tab[i].className.replace(" active", "");
}
document.getElementById(galleryName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "Roboto"
src: url("Roboto-Bold-webfont.woff") format("woff");
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: "Roboto"
src: url("Roboto-Regular-webfont.woff") format("woff");
font-style: normal;
font-weight: 400;
}
body {
width: 100%;
font-family: "Roboto", sans-serif;
font-size: 15px;
line-height: 1.5em;
}
.page {
display: flex;
justify-content: space-around;
margin-top: 50px;
}
.sidebar {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
position: fixed;
top: 100px;
left: 50px;
width: 400px;
/* border: 1px solid red; */
}
.sidebar-button {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
}
.sidebar img {
height: 200px;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 50px 0 0 400px;
/* border: 1px solid red; */
}
.page-tab {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.tab {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
}
.sidebar-button,.tab {
margin: 10px;
height: 45px;
background-color: #D99023;
border-radius: 5px;
border: none;
cursor: pointer;
color: #FFFFFF;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 20px;
}
.sidebar-button:hover,.tab:hover {
background-color: #9C5400;
}
.sidebar-button a {
text-decoration: none;
color: #FFFFFF;
}
.page-tab button:active {
background-color: #9C5400;
color: #FFFFFF;
}
.gallery-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 50px;
}
.gallery-container img {
height: 350px;
}