menu et include

**nephi28** · 11/08/2023, 20h34

Bonjour à tous,

Je suis en train de réaliser un site utilisant un menu avec onglet et sous onglet.
Jusqu'à présent je faisait en sorte d'appeler toutes les pages php à partir de ma page principale avec include, chaque include appelé une autre page php dont le contenu se correspond à un sous onglet.
Seulement cela m'affiche tout le code de toutes les pages php au sein de ma page principale.

J'ai utilisé une solution plutôt sale : j'ai fait en sorte que par défaut toutes les pages appelé ne soient pas affiché grâce à l'attribue css : display: none;.
Seulement je me retrouve maintenant avec une grosse page chargé dans le navigateur, dont certes le contenu n'est pas affiché mais reste chargé inutilement.
De plus, je suis assez embêter car puisque les ID doivent être unique dans la grosse page chargé par le navigateur.

Quelle est la manière la plus propre de faire un menu qui plutôt que de masquer les pages suivant les sous onglet où l'on est les chargerais dynamiquement ?

Si besoin, voici quelques extrait du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class Onglet1 {
	function Onglet1()
	{
		?>
		<h2>Onglet 1</h2>
		<div class="subtab">
			<button class="subtablinks" onclick="openSubTab(event, 'sous-onglet1-1')">a</button>
			<button class="subtablinks" onclick="openSubTab(event, 'sous-onglet1-2')">b</button>
			<button class="subtablinks" onclick="openSubTab(event, 'sous-onglet1-3')">c</button>
			<button class="subtablinks" onclick="openSubTab(event, 'sous-onglet1-4')">d</button>
		</div>
		<div id="sous-onglet1-1" class="subtabcontent">
 
 
			<?php include 'onglet1/a.php'; ?>
		</div>
		<div id="sous-onglet1-2" class="subtabcontent">
			<?php include 'onglet1/b.php'; ?>
		</div>
 
		<div id="sous-onglet1-3" class="subtabcontent">
			<?php include 'onglet1/c'; ?>
		</div>
 
		<div id="sous-onglet1-4" class="subtabcontent">
			<?php include 'onglet1/d'; ?>
		</div>
		<?php
	}
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<body>
<div class="container">
    <div class="intro">
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'onglet1')">onglet1</button>
    </div>
 
    <div id="onglet1" class="tabcontent">
        <?php $onglet1->Onglet1(); ?>
    </div>

Et voici le code js :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}
 
function openSubTab(evt, subTabName) {
    var i, subtabcontent, subtablinks;
    subtabcontent = document.getElementsByClassName("subtabcontent");
    for (i = 0; i < subtabcontent.length; i++) {
        subtabcontent[i].style.display = "none";
    }
    subtablinks = document.getElementsByClassName("subtablinks");
    for (i = 0; i < subtablinks.length; i++) {
        subtablinks[i].className = subtablinks[i].className.replace(" active", "");
    }
    document.getElementById(subTabName).style.display = "block";
    evt.currentTarget.className += " active";
}

Je suis désolé si je met trop d'information ; un indice ne serait-ce que général m'irait très bien.

Merci pour votre aide ! (je débute complètement

, vous l'avez surement remarqué)

**mathieu** · 11/08/2023, 22h37

puisque vous utilisez du php, vous pouvez générer le contenu de la page en fonction d'un argument passé dans l'url.

regardez l'exemple que j'ai mis en pièce-jointe, je l'avais fait pour une autre discussion qui avait la particularité d'avoir le menu en dessous du contenu mais c'est complètement adaptable à vos besoin.

**nephi28** · 11/08/2023, 23h52

Merci !!

Cela fait des jours que je cherche une solution.
Je vais tenter d'adapter cela au site, en plus l'exemple est parfait : minimaliste et donc très pédagogique

menu et include

Langage PHP

Discussions similaires

Partager

Partager