Bonjour,
j’ai récupéré un code Html pour faire des onglets d’affichage dans un design
j’ai 4 onglets qui switches vers 4 designs différents:
-Jour
-Semaine
-Mois
-Année
Quand je suis sur la page et que je change d’onglet j’arrive à faire changer la couleur de l’onglet mais ça ne fonctionne pas au chargement de la page (avec l’onglet par défaut)
Si quelqu’un a une idée en regardant mon code svp:
<!-- Conteneur -->
<div style="width:100%; height:100%; display:flex; flex-direction:column;">
<!-- Onglets -->
<div style="display:flex; border-bottom:2px solid #ccc; margin-bottom:5px;">
<div class="onglet" onclick="switchDesign(0)">Jour</div>
<div class="onglet" onclick="switchDesign(1)">Semaine</div>
<div class="onglet" onclick="switchDesign(2)">Mois</div>
<div class="onglet" onclick="switchDesign(3)">Année</div>
</div>
<!-- Zone d'affichage du design -->
<div style="flex:1; width:100%; height:100%;">
<iframe id="iframeDesign" src="index.php?v=d&p=plan&plan_id=27&fullscreen=1"
style="width:100%; height:100%; border:none; border-radius:5px;">
</iframe>
</div>
</div>
<style>
.onglet {
padding:5px 7px;
cursor:pointer;
border:1px solid #ccc;
border-bottom:none;
background:#f0f0f0;
margin-right:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.onglet:hover {
background:#e0e0e0;
}
.onglet.active {
background:#b4c1ee;
font-weight:bold;
border-bottom:2px solid white;
}
</style>
<script>
// IDs des designs (modifie selon tes besoins)
var designs = [27, 28, 29, 30];
var currentIndex = 0;
function switchDesign(index) {
currentIndex = index;
document.getElementById("iframeDesign").src = "index.php?v=d&p=plan&plan_id=" + designs[index] + "&fullscreen=1";
// mise à jour style onglets
document.querySelectorAll(".onglet").forEach((el,i)=>{
el.classList.toggle("active", i === index);
});
}
// Activer le premier onglet au chargement
document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll(".onglet")[0].classList.add("active");
});
</script>
@noodom une idée?
Merci