problème pagination onglets
Posté : 03 févr. 2024, 05:02
bonjour tout le monde,
Depuis des semaines, je travaille sur un système d'onglets paginés. Je suis presque au résultat désiré.
Ce que je veux avoir ce sont des onglets (nombre indéfini) qui peuvent avoir un nombre de pages variables. Par exemple, l'onglet 1 pourrait avoir parfois 1, 2, 3 voire plus de pages ; idem pour les autres.
Le problème que je rencontre se trouve dans "page précédente" lorsqu'il y a plus de 2 pages. Je n'arrive pas à revenir à la page précédente.
Voici le JavaScript :
document.addEventListener('DOMContentLoaded', function () {
// Afficher le contenu par défaut
afficherContenu('onglet1');
// Attacher les gestionnaires d'événements aux onglets
var onglets = document.querySelectorAll('.onglet');
onglets.forEach(function (onglet) {
onglet.addEventListener('click', function (event) {
var ongletId = event.currentTarget.getAttribute('data-onglet');
afficherContenu(ongletId);
});
});
// Attacher les gestionnaires d'événements à la navigation "page précédente" "page suivante"
var navPages = document.querySelectorAll('.nav-page');
navPages.forEach(function (navPage) {
navPage.addEventListener('click', function () {
var ongletId = navPage.getAttribute('data-onglet');
var page = parseInt(navPage.getAttribute('data-page'));
afficherContenu(ongletId, page);
});
});
});
function afficherContenu(onglet, page = 1) {
// Masquer tous les contenus d'onglets
var ongletsContenus = document.querySelectorAll('.contenu-onglet');
ongletsContenus.forEach(function (contenu) {
contenu.style.display = 'none';
});
// Afficher le contenu spécifique
var contenuId = onglet + '-' + page;
var contenu = document.getElementById(contenuId);
if (contenu) {
contenu.style.display = 'block';
gestionPagination(onglet, page);
}
}
function gestionPagination(ongletId, page) {
// Désactiver toutes les nav-pages
var navPages = document.querySelectorAll('.nav-page');
navPages.forEach(function (navPage) {
navPage.style.pointerEvents = 'none';
});
// Activer la nav-page suivante si elle existe
var pageSuivante = document.querySelector('.nav-page[data-onglet="' + ongletId + '"][data-page="' + (page + 1) + '"]');
if (pageSuivante) {
pageSuivante.style.pointerEvents = 'auto';
}
// Activer la nav-page précédente si nécessaire
if (page > 1) {
var pagePrecedente = document.querySelector('.nav-page[data-onglet="' + ongletId + '"][data-page="' + (page - 1) + '"]');
if (pagePrecedente) {
pagePrecedente.style.pointerEvents = 'auto';
}
}
}
MERCI pour votre aide.
Depuis des semaines, je travaille sur un système d'onglets paginés. Je suis presque au résultat désiré.
Ce que je veux avoir ce sont des onglets (nombre indéfini) qui peuvent avoir un nombre de pages variables. Par exemple, l'onglet 1 pourrait avoir parfois 1, 2, 3 voire plus de pages ; idem pour les autres.
Le problème que je rencontre se trouve dans "page précédente" lorsqu'il y a plus de 2 pages. Je n'arrive pas à revenir à la page précédente.
Voici le JavaScript :
document.addEventListener('DOMContentLoaded', function () {
// Afficher le contenu par défaut
afficherContenu('onglet1');
// Attacher les gestionnaires d'événements aux onglets
var onglets = document.querySelectorAll('.onglet');
onglets.forEach(function (onglet) {
onglet.addEventListener('click', function (event) {
var ongletId = event.currentTarget.getAttribute('data-onglet');
afficherContenu(ongletId);
});
});
// Attacher les gestionnaires d'événements à la navigation "page précédente" "page suivante"
var navPages = document.querySelectorAll('.nav-page');
navPages.forEach(function (navPage) {
navPage.addEventListener('click', function () {
var ongletId = navPage.getAttribute('data-onglet');
var page = parseInt(navPage.getAttribute('data-page'));
afficherContenu(ongletId, page);
});
});
});
function afficherContenu(onglet, page = 1) {
// Masquer tous les contenus d'onglets
var ongletsContenus = document.querySelectorAll('.contenu-onglet');
ongletsContenus.forEach(function (contenu) {
contenu.style.display = 'none';
});
// Afficher le contenu spécifique
var contenuId = onglet + '-' + page;
var contenu = document.getElementById(contenuId);
if (contenu) {
contenu.style.display = 'block';
gestionPagination(onglet, page);
}
}
function gestionPagination(ongletId, page) {
// Désactiver toutes les nav-pages
var navPages = document.querySelectorAll('.nav-page');
navPages.forEach(function (navPage) {
navPage.style.pointerEvents = 'none';
});
// Activer la nav-page suivante si elle existe
var pageSuivante = document.querySelector('.nav-page[data-onglet="' + ongletId + '"][data-page="' + (page + 1) + '"]');
if (pageSuivante) {
pageSuivante.style.pointerEvents = 'auto';
}
// Activer la nav-page précédente si nécessaire
if (page > 1) {
var pagePrecedente = document.querySelector('.nav-page[data-onglet="' + ongletId + '"][data-page="' + (page - 1) + '"]');
if (pagePrecedente) {
pagePrecedente.style.pointerEvents = 'auto';
}
}
}
MERCI pour votre aide.