I’m at a complete and utter loss and it’s really frustrating.
I want to make it so when I click on a certain link, it will only change the content inside one div on the same page so I don’t have to link multiple different pages. It’s impractical to have multiple different HTML pages just for me to change one div’s content. When I click on one of the links, it should hide the default content and switch it with whatever content I want relating to that link.
I’ve tried looking up multiple different videos and questions, but I fear I’m maybe not wording it right or I just don’t understand. Some of the tutorials I followed got me to where the content was hidden but when I would click on the links nothing popped up. I’m assuming this will use some javascript which is fine, I don’t mind learning that. But I have yet to use it for anything so I’m unsure of where to go from here.
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<style>
body {
font-family: 'Courier New', monospace;
background-image: url("background.png");
background-repeat: repeat;
}
a:link {
color: black;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: black;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: hotpink;
text-decoration: none;
font-weight: bold;
}
a:active {
color: black;
text-decoration: none;
font-weight: bold;
}
</style>
<body>
<!--CONTAINER-->
<div class="container">
<!--LEFT-->
<div class="links">
<ul>
<li style="list-style-image: url('starblink.gif');" alt="graphic of a green star"><a href="about.html" target="_parent">ABOUT</a></li>
<li style="list-style-image: url('starblink2.gif');" alt="graphic of a red star"><a href="resources.html" target="_parent">RESOURCES</a></li>
<li style="list-style-image: url('starblink3.gif');" alt="graphic of a yellow star"><a href="shrines.html" target="_parent">SHRINES</a></li>
<li style="list-style-image: url('starblink4.gif');" alt="graphic of a blue star"><a href="misc.html" target="_parent">MISC</a></li>
</ul>
</div>
<!--MIDDLE-->
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
And my CSS:
/*CONTAINER*/
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 700px;
min-height: 700px;
margin-top: -20px;
}
/*LEFT*/
.links {
width: 200px;
min-width: 200px;
margin-top: -50px;
margin-left: 50px;
line-height: 60px;
font-size: 35px;
}
/*MIDDLE*/
.main {
width: 400px;
min-width: 400px;
height: 600px;
min-height: 600px;
margin-top: -10px;
margin-left: 80px;
margin-right: 20px;
padding-left: 20px;
padding-top: 10px;
overflow-y: auto;
overflow-x: hidden;
}