Hoe maak je een navigatie met div's zonder dat de hele pagina steeds opnieuw laadt?

Question

Ik heb geleerd te werken met frames. Dan deel je een frame in als "name=doelframe". Als je dan op een navigatieonderdeel klikt en erachter zet "target=doelframe" opent die tekst in het doelframe.

Nu wil ik van de frames af en ben ik een website aan het maken met div's. Maar als je dan klikt op een onderdeel van de navigatie krijg je wel de gewenste tekst, maar verdwijnt de lay out. Nu heb ik in alle pagina's de hele layout geplakt, maar dat lijkt me niet de bedoeling, want dat is zeer bewerkelijk bij wijzigingen. Bovendien laadt dan steeds de pagina opnieuw en dat ziet storend uit.

Hoe moet ik dit aanpakken?

Bij voorkeur een antwoord waarbij gewerkt wordt met html en css.

 · Answer

Als je geen frames wilt gebruiken (Dus ook geen iframes) is een oplossing het gebruik van AJAX; dmv javascript de nieuwe inhoud ophalen, en in de div plaatsen.

Net zo makkelijk is het om je opmaak & inhoud te scheiden: Je maakt een template, en haalt de inhoudt voor de template uit een database. Uiteraard wordt hierbij de hele pagina opnieuw geladen, maar dat is geen probleem: Als je naar eennieuwe pagina gaat, gebeurt dat nu eenmaal; Het is dan ook een andere pagina.

Toegevoegd na 22 minuten:
Overigens: Door je layout met CSS te doen, hoef je bij veranderingen in opmaak niet je hele pagina aan te passen: Je past eenvoudig de CSS aan, die je uiteraard in een extern bestand zet.

rose · Answer

Zet op de plaats van de frame een rij div's onder elkaar met verschillende id's en class content.

Geef alle div's, behalve de eerste style="display:none;" mee. De eerste geef je style="display:inline;"  (of block) mee.

Je navigatie laat je met javascript ( onclick = "setDiv('divID');" ) telkens een ander div zichtbaar maken.

De functie zet div wordt dan iets van

function setDiv(divID)
{
 var list = document.getElementsByClassName("content");
 for (var i = 0; i < list.length; i++) 
  {
      list[i].style.display="none"
   }
document.getElementById[divID].style.display=‘inline’
}

waarbij divID het ID van de gewenste div is.

Wel zorgen dat je aanhalingstekens goed staan!

Hoe maak je een navigatie met div's zonder dat de hele pagina steeds opnieuw laadt?

Antwoorden (2)

Weet jij het beter..?