HTML pagina op HTML website uitvoeren
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.
Kan je de relevante code tussen code-tags plaatsen?
Ik hoop dat je geen nostalgische framesets hebt gebruikt....
Gewijzigd op 28/12/2019 18:44:01 door - Ariën -
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.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</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. :)
Gewijzigd op 28/12/2019 21:25:33 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
<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
Code (php)
1
<h1>Header</h1>
menu.html
Code (php)
1
<p><a href="#">menu 1</a> | <a href="#">menu 2</a> | <a href="#">menu 3</a></p>
footer.html
Code (php)
1
<h3>Footer</h3>
Echter krijg ik alleen Meer inhoud... te zien.
Gewijzigd op 28/12/2019 21:25:00 door - Ariën -
Gewijzigd op 28/12/2019 21:24:35 door - Ariën -
Gewijzigd op 28/12/2019 21:24:11 door - Ariën -
Gewijzigd op 28/12/2019 21:23:51 door - Ariën -
Edit:
Ik heb wat quotes weggeknipt uit dit topic. Het is niet nodig om het voorlaatste bericht steeds integraal te quoten. Onderaan staat ook een 'quick-reply'!
Gewijzigd op 28/12/2019 21:28:47 door - Ariën -
file:///C:/Users/XXXX/Desktop/XXXX/Site/test/index.html
Gewijzigd op 28/12/2019 21:28:10 door - Ariën -
Upload het ergens naar toe, of draai een eigen (lokale) webserver, en benader het via een http/https URL.
Overigens, een pad valt niet onder 'localhost' :-)
Gewijzigd op 28/12/2019 21:58:41 door - Ariën -
Had ik het toch al die tijd goed gedaan :)
Enorm bedankt voor jullie hulp!
Gewijzigd op 28/12/2019 22:13:04 door - Ariën -
Lees ook even de mod-break met dik gedrukte tekst in het vlak. :-)
Gewijzigd op 28/12/2019 22:14:42 door - Ariën -