ARTICLE AD BOX
I'm really new to coding and I'm trying to make tabs for showing two different galleries. The first tab is working just fine, but when I click the second one nothing shows up. We're "in it" because the tab has the "active" style, but that's it.
I looked everywhere for an answer but I can't find it so here I am.
My code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Birds</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="icon" href="Icone onglet chat noir.gif" />
<style>
html {
overflow:scroll;
overflow-x:hidden;
}
body {
background-color: #262525;
background-image: url("https://dl.glitter-graphics.com/pub/3770/3770814wt5mu5rbtj.gif");
background-attachment: fixed;
background-repeat: repeat;
overflow:scroll;
overflow-x:hidden;
font-family: "Courier New", Courier, monospace;
font-size: 14;
color: #FFFFFF;
}
.home {
overflow: auto;
align-content: center;
margin-left: auto;
margin-right:auto;
width: 100vw;
border-style:transparent;
background: transparent;
padding: 15px 15px 5px;
display: flex;
/* lien non visité */
a:link {
color: #000000
}
/* lien visité */
a:visited {
color: #C0C0C0;
}
/* souris sur le lien */
a:hover {
color: #FFFFFF;
}
/* lien sélécté */
a:active {
color: #5a772e;
}
footer {
position: fixed;
left: 100;
bottom: 0;
width: 1500px;
background-color: transparent;
color: white;
text-align: justify;
padding: 2;
}
*::selection {
color: #ffffff;
background: #afdbff;
}
.container {
border-style: solid;
border-color: #ffffff;
background: rgb(211, 244, 255);
color: #2b3566;
margin: auto;
width: 800px;
min-height: 90vh;
text-align: center;
position: relative;
display: -moz-grid;
padding: 15px;
z-index: 4;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-template-rows: repeat(12, 18vw);
grid-gap: 15px;
padding-top: 2em;
}
.gallery img {
border: 1px solid #ffffff;
border-radius: 9px;
}
.gallery p {
margin: 0;
padding-bottom: 4px;
text-align: center;
font-style: italic;
font-size:13px;
}
.gallery img:hover {
transform:scale(1.8);
z-index:2;
border: 2px solid #ffffff;
}
.container img {
width: 100%;
position: relative;
z-index: 1;
}
.likey {
width:500px;
margin-left:auto;
margin-right:auto;
}
.legend {
background:white;
background-opacity:0.2;
border-radius:9px;
height:102%;
border: 1px solid #ffffff;
}
/* Style the tab */
.tab {
overflow: hidden;
text-align:center;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: center;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-family: "Courier New", Courier, monospace;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #afdbff;
border-radius:30px;
}
/* Create an active/current tablink class */
.tab button.active {
border: 1px solid #afdbff;
border-radius:30px;
}
/* Style the tab content */
.tabcontent {
display: block;
padding: 6px 12px;
}
</style>
</head>
<body>
<div class="home">
<div class="container">
<div class="likey"><img src="I like birds.png" /></div>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Birds')">Birds</button>
<button class="tablinks" onclick="openCity(event, 'Burbs')">Burbs?</button>
</div>
<div id="Birds" class="tabcontent">
<div class="gallery">1st tab content</div>
<div id="Burbs" class="tabcontent">
<div class="gallery">2nd tab content</div>
</div>
</div>
</div>
<script>
function openCity(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";
}
document.body.addEventListener("DOMContentLoaded", openCity(event, "Birds"));
</script>
</div>
</body>
</html>
