Jeśli cała strona jest dość mała, to mógłbyś tak zrobić, że załadować wszystko naraz, tylko fragmenty byłyby ukryte za pomocą właściwości display: none w CSS
<div id="about" style="display:none">
o mnie
</div>
wtedy mógłbyś coś takiego zrobić:
document.getElementById('about').display = 'block'; // wyświetlanie
//...
document.getElementById('about').display = 'none'; // ukrywanie
Albo też można to zrobić w CSS za pomocą tricku: https://css-tricks.com/the-checkbox-hack/
Natomiast jeśli strona faktycznie byłaby duża, to wtedy można by rozważać ładowanie tego dynamicznie.
<a href="javascript:void(0)" onClick="openInContent('content', 'about/about.html')">About</a>
Czemu nie lubisz użytkownika? Jeśli chcesz to ładować dynamicznie, to pozwól użytkownikowi na otwarcie linku na różne sposoby. Użytkownik niekoniecznie będzie klikał lewym przyciskiem, żeby otworzyć link, ja często otwieram środkowym przyciskiem, żeby się w nowej karcie otworzyło. Więc lepiej byłoby, żeby wyglądało to tak:
<a href="about/about.html" onClick="openInContent('content', 'about/about.html')">About</a>
przy czym zapewne będziesz musiał dać wtedy return false
czy wywołać metodę preventDefault()
na obiekcie zdarzenia, żeby zablokować domyślną akcję, jakby użytkownik faktycznie kliknął lewym przyciskiem.
Tylko, że po tym, co tu wrzuciłeś, to mam wrażenie, że robisz coś kompletnie od czapy i że ta strona powinna być przepisana na jedną z poniższych:
- klasyczna strona HTML z normalnymi linkami do podstron, bez jakiegoś ładowania dynamicznego
- prosta stronka z pewnymi interaktywnymi elementami dopisanymi w JS albo za pomocą HTML/CSS. Stronka ta nie musiałaby niczego ładować, po prostu by były wyświetlane albo chowane pewne załadowane już elementy. Mógłbyś też skorzystać z kotwic do nawigacji (np. jak na tym przykładzie: https://jsfiddle.net/en5yLq3k/)
- SPA(Single Page Application) - czyli strona, która działa jak aplikacja, gdzie JS steruje całym GUI. Tylko wtedy:
- warto użyć jakiejś biblioteki typu React czy Vue
- zwykle się pobiera suche dane w formacie JSON z serwera i już widok robi po stronie przeglądarki tworząc tzw. "komponenty", w których umieszczasz szablon danego elementu strony
- pytanie, czy takie podejście ci w ogóle potrzebne? Z jednej strony wydaje się, że i tak robisz już swoją partyzancką wersję SPA, więc użycie Reacta miałoby więcej sensu. Z drugiej strony... no nie wiem, to zależy, co dokładnie robisz. Czy to ma być prosta stronka, do której chcesz dodać trochę interaktywności, czy może faktycznie rozbudowana aplikacja?