Hét vraag- en antwoordplatform van Nederland

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

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.

Verwijderde gebruiker
12 jaar geleden
1.1K

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Antwoorden (2)

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.
(Lees meer...)
Verwijderde gebruiker
12 jaar geleden
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!
(Lees meer...)
rose
12 jaar geleden
Verwijderde gebruiker
12 jaar geleden
Moet ik dit invoeren als index.htm pagina? Want door de style="display:none;" krijg ik maar een deel te zien.

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000
Gekozen afbeelding