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:
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
30class 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 } }
Et voici le code js :Code:
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>
Code:
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
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 :aie:, vous l'avez surement remarqué)
