HTML5 één index pagina, verschillende links die openen in de section

Status
Niet open voor verdere reacties.
Molovhic

Molovhic

Gebruiker
Lid geworden
27 mei 2016
Berichten
76
Hoi

Ik zit wat in de knoop met het openen van links.
Ik heb een index pagina met een 5 tal links, die 1 index pagina is opgemaakt zoals ik wil
om die aparte pagina's (links) niet steeds te hoeven opmaken wil ik dat ze in de section gedeelte openen
echter krijg ik dit niet aan de praat.

In dit voorbeeld moet dus de audit.html pagina gwn openen in het section gedeelte..

HTML: 
<!doctype html>
<html>
	<head>
		<title> Test </title>
		<meta charset="utf-8">
		<meta name="description" content="Test website">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
<body>
	<header>
	<h1> Test </h1>
	<nav>
	<ul id="main-menu">
		<li><a href="audit.html" target="_self">Audit</a></li>
		<li><a href="#">Departement Chart</a></li>
		<li><a href="#">Weekly Chart</a></li>
		<li><a href="#">Monthly Chart</a></li>
		<li><a href="#">DC YTD Chart</a></li>
	</ul>
	</nav>
	</header>
	<section id="sectiondiv">

	Lorem ipsum..
	</section>
	<footer>Copyright 2019</footer>
</body>
</html>
 
Dan zou PHP een goede oplossing zijn, omdat HTML er geen goede oplossingen meer voor biedt. Vroeger had je frames, maar dat gaf meer nadelen dan voordelen.
Iframes zou kunnen, maar dat raad ik ook af.

Dit plaats je dan op de plek van je 'Lorem Ipsum'

PHP: 
<?php
// bepaal map waar alle pagina's in staan.
$map = "paginas";

// toegestane pagina's in een array zetten
$toegestaan=array("contact","pagina2","pagina3","pagina4","pagina5","pagina6");

// controleren of er een pagina is meegegeven)
if (isset($_GET['p'])){

// controleren of de pagina voorkomt in de array
if (in_array($pagina, $toegestaan)){

    // wanneer die toegestaan is: includeren.
    include $map."/".$pagina.".php";

    } else {

    // wanneer die niet toegestaan is een foutmeldings-pagina includen.
    include "niet_gevonden.php";
    }

// als er geen parameter met ?= is meegegeven, includeer dan home.php
} else {
   include $map."/"."home.php";
}
?>

De normale inhoud die je standaard ziet, die plaats je in home.php.
De andere pagina's plaats je in de array (zonder .php) extentie, en de link is dan:
index.php?p=contact.

Je kan eventueel ook AJAX gebruiken, zodat je zonder een refresh een pagina kan opvragen, maar dat is wat complexer.
 
Laatst bewerkt:
Jammer dat het niet met HTML op te lossen valt..
Ik herinner mij dit stukje nog wel van één van mijn lessen, helaas is PHP niet mijn ding..
Ook werk ik voorlopig lokaal zonder sql server (heb eventueel wel usbwebserver op stick staan..) dus met extensie php
kan ik niet direct verder..
 
Ik heb al een stukje code gegeven met wat uitleg, dus probeer het eens! :)
Verder heb je hier geen SQL voor nodig. Alleen een webserver met PHP-ondersteuning. Maar de meesten hebben dat wel hoor.
 
Laatst bewerkt:
Hoe open je deze dan in de browser voor verder te testen/werken? die kan toch geen php lezen?
 
Zoals ik al zei heb je daarvoor een webserver met PHP-ondersteuning nodig.
Zoals USBwebserver (is portable), of nog beter: XAMPP, maar die moet wel worden geïnstalleerd, maar is ten opzichte van USBwebserver wel actueler met nieuwe PHP en MySQL versies.

Zodra je die draait, kan je alles bereiken via de interne URL: http://127.0.0.1 en http://localhost
 
Laatst bewerkt:
Met php maak je de beste oplossing. Mocht je het helemaal niet zien zitten dan kan het met ajax (zoals php4u al noemde). Laat je hele html zoals die is en zet dit tussen </footer> en </body>
Code: 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
  // doe de ajax call bij een click op het linkje
  $("#main-menu a").click(function(event) {
    // voorkom dat linkje op de normale manier werkt
    event.preventDefault();
    // wat is de naam van het bestand waarin de content staat
    var contentFile = "content-" + $(this).attr("href");
    // hieronder de ajax call :)
    $.ajax({
      url: contentFile,
      // als alles goed gaat, vervang dan inhoud van id=sectiondiv
      success: function(result) {
        $("#sectiondiv").html(result);
      },
      // als het niet is gelukt, toon dan een melding in id=sectiondiv
      error: function() {
        $("#sectiondiv").html("Oops, content niet gevonden");
      }
    });
  });
});
</script>
Je maakt "kale" html bestanden zonder head gedeelte en zonder doctype, html en body tags.
Voorbeeld: een bestand "content-audit.html met inhoud
Code: 
<h1>Hallo wereld</h1>
<p>Dit is een tekst</p>
 
Hoi

Heb het voorlopig opgelost met PHP..
Jammer wel want anno 2019 had ik het graag puur met HTML willen zien werken :)
maar soit, het werkt wel

Thx allemaal !
 
HTML blijft een opmaaktaal, en geen programmeertaal. Dus ik kan mij de keuze van W3 die de specificaties van CSS en HTML vastlegt, wel begrijpen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan