HTML pagina op HTML website uitvoeren

Door Ivan Heerkens op 28-12-2019 18:23

3.002 views

Beste lezer,

Ik ben sinds kort begonnen met mijn eigen website te ontwikkelen. Nu loop ik tegen wat problemen aan. Via Google kom ik er niet uit of het werkt gewoon niet zoals ik het wil.

Ik heb een HTMl/CSS gebaseerde website waar ik graag de header, footer en menu apart wil hebben. Deze wil ik dan op de pagina in laten laden los van de gewone pagina. Dus index.html die dan menu.html, header.html en footer.html laad. Volgens bronnen moet dit met JavaScript, maar weet niet wat ik fout doe. ik volg de stappen zoals op internet staat maar het lukt mij niet.

Iemand enig idee hoe dit werkt? Ik heb geen voorbeeldcode omdat ik na al het proberen het heb opgegeven en niet opgeslagen heb. Natuurlijk wel de standaard index.html van mij.

- Ariën -

28-12-2019 18:40 gewijzigd op 28-12-2019 18:44

Wat heb je dan geprobeerd? Welke bron heb je gebruikt?
Kan je de relevante code tussen code-tags plaatsen?

Ik hoop dat je geen nostalgische framesets hebt gebruikt....

I Ivan Heerkens

28-12-2019 19:33 gewijzigd op 28-12-2019 21:25

Bedankt voor je snelle reactie. ik gebruik zeker geen frame zooi. haha

Het gaat om hët volgende: :
KLIK VOOR BRON

Heb de scripts overgenomen en aangepast waar nodig, maar werkt niet. Tevens moet ik ook de js file er voor hebben, die ik ook niet zelf kan maken helaas.


<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script>

Vroeger kon ik het enig sinds wel, maar weet het nu gewoon niet meer hoe het moet :S
Het is niet mijn eigen code, maar wellicht krijg je hiermee het idee wat ik wil. :)

A Adoptive Solution

28-12-2019 19:48

Dit moet werken.

<html>
<head>
<title>Titel</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="header"></div>
<div id="menu"></div>
<p>Meer inhoud...</p>
<div id="footer"></div>

<script> 
$(function(){
	$("#header").load("header.html");
	$("#menu").load("menu.html");
	$("#footer").load("footer.html");
});
</script>

</body>
</html>

header.html

<h1>Header</h1>

menu.html

<p><a href="#">menu 1</a> | <a href="#">menu 2</a> | <a href="#">menu 3</a></p>

footer.html

<h3>Footer</h3>

I Ivan Heerkens

28-12-2019 20:08 gewijzigd op 28-12-2019 21:25

Super snelle reactie, dank je wel!
Echter krijg ik alleen Meer inhoud... te zien.

A Adoptive Solution

28-12-2019 20:16

"Meer inhoud" is wat je zelf moet aanpassen en toevoegen.

I Ivan Heerkens

28-12-2019 20:23 gewijzigd op 28-12-2019 21:24

Dat snap ik, maar ik zie na het overnemen nog altijd niet de header, footer en menu :S. alleen Meer inhoud... het laden duurt ook enorm lang.

A Adoptive Solution

28-12-2019 20:24

Ik heb duidelijk aangegeven welke bestanden je nog meer moet maken.

I Ivan Heerkens

28-12-2019 20:27 gewijzigd op 28-12-2019 21:24

ik heb index.html waarin de grote code in staat. Daarnaast ook header.html, menu.html en footer.html aangemaakt in dezelfde map. Precies zoals het er staat

- Ariën -

28-12-2019 21:05

Hoe voer je index.html uit?

I Ivan Heerkens

28-12-2019 21:07 gewijzigd op 28-12-2019 21:23

ik open hem gewoon in mn browser, google chrome.

Reageren

Inloggen om te reageren