Есть ли способ заменить контент, нажав на ссылку? ⇐ Html

[Anonymous]

Я в полной растерянности, и это меня очень расстраивает.
Я хочу сделать так, чтобы при нажатии на определенную ссылку изменялось только содержимое внутри нее. div на одной странице, поэтому мне не нужно связывать несколько разных страниц. Непрактично иметь несколько разных HTML-страниц только для того, чтобы изменить содержимое одного div. Когда я нажимаю на одну из ссылок, она должна скрыть содержимое по умолчанию и заменить его любым содержимым, которое я хочу иметь отношение к этой ссылке.
Я пробовал найти несколько разных видео и вопросов. , но боюсь, что я неправильно формулирую или просто не понимаю. Некоторые из руководств, которым я следовал, приводили меня туда, где контент был скрыт, но когда я нажимал на ссылки, ничего не появлялось. Я предполагаю, что здесь будет использоваться некоторый JavaScript, и это нормально, я не против его изучить. Но я еще ни для чего его не использовал, поэтому не знаю, что делать дальше.
Это мой HTML:




TEST

[*]



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;
}

• ABOUT
• RESOURCES
• SHRINES
• MISC

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.





И мой 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;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... -on-a-link