Changer la classe d'une DIV onglet
Résolu
Shuta
Messages postés
210
Date d'inscription
Statut
Membre
Dernière intervention
-
Shuta Messages postés 210 Date d'inscription Statut Membre Dernière intervention -
Shuta Messages postés 210 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Alors voilà, mon problème semble simple au premiers abords sauf que j'ai des petits soucis quand je l’exécute...
Il s'agit d'un simple système d'onglet qui reste sur la même page.
J'ai déjà fait une activation en JS qui semble satisfaisante mais le problème c'est que je voudrais changer la class directement.
Voici le code que j'ai actuellement :
J'arrive pas à changer la class des div avec les Onclick... (j'ai retiré tout ce que j'avais mis dans mon code actuel car ça faisait vraiment brouillon)
Merci de bien vouloir m'aider !
Bonne soirée !
Alors voilà, mon problème semble simple au premiers abords sauf que j'ai des petits soucis quand je l’exécute...
Il s'agit d'un simple système d'onglet qui reste sur la même page.
J'ai déjà fait une activation en JS qui semble satisfaisante mais le problème c'est que je voudrais changer la class directement.
Voici le code que j'ai actuellement :
<div id="zone_menu" class="zone_menu">
<div class="ongl_act" onClick="switchOnglet('onglet_news_1','div_onglet')">Cat 1</div>
<div class="ongl_act" onClick="switchOnglet('onglet_news_2','div_onglet')">Cat 2/div>
<div class="ongl_act" onClick="switchOnglet('onglet_news_3','div_onglet')">Cat 3</div>
</div>
<div class="clear"></div>
<div id="zone_onglets" class="zone_onglets">
<div id="onglet_news_1" class="div_onglet" style="display: block;">
BLABLABLA
</div>
<div id="onglet_news_2" class="div_onglet" style="display: none;">
BLABLABLA
</div>
<div id="onglet_news_3" class="div_onglet" style="display: none;">
BLABLABLA
</div>
function switchOnglet(id_elm,strClassName){
var onglets = getElementsByClassName(strClassName);
console.log(onglets);
//on masque tous les onglets
for(var i=0; i<onglets.length; i++){
onglets[i].style.display = 'none';
}
//on affiche l'onglet identifié par son id
var ong = document.getElementById(id_elm);
ong.style.display = '';
}
function getElementsByClassName(className){
var returnElements = [];
var elements = document.getElementsByClassName(className);
for(var i=0; i<elements.length; i++){
returnElements.push(elements[i]);
}
return returnElements;
}
J'arrive pas à changer la class des div avec les Onclick... (j'ai retiré tout ce que j'avais mis dans mon code actuel car ça faisait vraiment brouillon)
Merci de bien vouloir m'aider !
Bonne soirée !
A voir également:
- Changer la classe d'une DIV onglet
- Changer dns - Guide
- Raccourci rouvrir onglet fermé - Guide
- Changer carte graphique - Guide
- Changer wifi chromecast - Guide
- Changer clavier qwerty en azerty - Guide
3 réponses
Bonjour !
Finalement j'ai opté pour un autre code car vraiment rien ne marchait avec celui que j'avais.
voici le script avec un appel jQuery
Pour ce code :
Ainsi j'ai enlevé tous les onClick
Le code marche très bien et peut être utilisé sur d'autres effets de la page sans que ça ne cause de bug.
Finalement j'ai opté pour un autre code car vraiment rien ne marchait avec celui que j'avais.
voici le script avec un appel jQuery
$(function() {
$('.zone_act').css('display', 'block');
$('.zone_act').click(function(event) {
var actuel = event.target;
if (!/div/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
return;
}
$(actuel).addClass('actif').siblings().removeClass('actif');
setDisplay();
});
function setDisplay() {
var modeAffichage;
$('.zone_act div').each(function(rang) {
modeAffichage = $(this).hasClass('actif') ? '' : 'none';
$('.zone_oact').eq(rang).css('display', modeAffichage);
});
}
setDisplay();
});
Pour ce code :
<div id="zone_menu" class="zone_menu zone_act"> <div class="actif">Japanimation</div> <div >Jeux Vidéo</div> <div >Divers</div> </div> <div class="clear"></div> <div id="zone_onglets" class="zone_onglets "> <div id="onglet_news_1" class="div_onglet zone_oact"> BLABLABLA </div> <div id="onglet_news_2" class="div_onglet zone_oact"> BLABLABLA </div> <div id="onglet_news_3" class="div_onglet zone_oact"> BLABLABLA </div> </div>
Ainsi j'ai enlevé tous les onClick
Le code marche très bien et peut être utilisé sur d'autres effets de la page sans que ça ne cause de bug.
Bonjour,
Que signifie pour toi:
"mais le problème c'est que je voudrais changer la class directement. " ?
Changer quoi ? Où ? Mettre quoi à la place de quoi ?
Merci de nous apporter ces précisions.
Que signifie pour toi:
"mais le problème c'est que je voudrais changer la class directement. " ?
Changer quoi ? Où ? Mettre quoi à la place de quoi ?
Merci de nous apporter ces précisions.
Bonjour,
Ajouter un ID à l'élément DIV par exemple: "cat1"
puis en javascript faire:
pour supprimer une classe
Ajouter un ID à l'élément DIV par exemple: "cat1"
<div id="cat1" class="ongl_act" onClick="switchOnglet('onglet_news_1','div_onglet')">Cat 1</div>
puis en javascript faire:
document.getElementById("cat1").classList.add("active");
pour supprimer une classe
document.getElementById("cat1").classList.remove("active");
C'est ce que j'ai déjà dit mais il semblerai qu'on ne me comprenne pas des masses...
Je confirme.
Au même titre que tu ne comprends pas des masses non plus ce qu'on t'explique visiblement.
Ca ne sert à rien de faire des copier/coller bêtement sans comprendre....
Mais bon...peu importe..... voila le code corrigé
<div id="zone_menu" class="zone_menu">
<div class="ongl_act" onClick="switchOnglet('onglet_news_1','div_onglet')">Cat 1</div>
<div class="ongl_act" onClick="switchOnglet('onglet_news_2','div_onglet')">Cat 2</div>
<div class="ongl_act" onClick="switchOnglet('onglet_news_3','div_onglet')">Cat 3</div>
</div>
<div class="clear"></div>
<div id="zone_onglets" class="zone_onglets">
<div id="onglet_news_1" class="div_onglet" style="display: block;">
BLABLABLA
</div>
<div id="onglet_news_2" class="div_onglet" style="display: none;">
zzzzzz
</div>
<div id="onglet_news_3" class="div_onglet" style="display: none;">
pppppppppppp
</div>
</div>
<script type="text/javascript">
function switchOnglet(id_elm,strClassName){
//on récupère dans un array la liste des onglets donc la class
// correspond au paramètre envoyé dans la fonction
var onglets = getElementsByClassName(strClassName);
//on masque tous les onglets (on boucle sur chaque onglet)
for(var i=0; i<onglets.length; i++){
//onglets[i] represente l'onglet parcouru par la boucle
onglets[i].style.display = 'none'; //on le masque
onglets[i].classList.remove("active"); // on enleve la class active
} // on passe au suivant...
//on affiche l'onglet identifié par son id
// ong correspond à l'onglet qu'on veut afficher
var ong = document.getElementById(id_elm);
// on l'affiche
ong.style.display = '';
// on lui met la class ACTIVE
ong.classList.add("active");
}
function getElementsByClassName(className){
var returnElements = [];
var elements = document.getElementsByClassName(className);
for(var i=0; i<elements.length; i++){
returnElements.push(elements[i]);
}
return returnElements;
}
</script>
Cordialement,
Jordane
Tu les as juste remplacé par
$('.zone_act').click((ce qui aurait aussi pu être fait en javascript avec to ncode d'origine...)
Le code ne causait aucun problème .... c'est ton utilisation et tes bidouillages qui généraient des soucis.....
Bon...
Tu es passé au Jquery et c'est tant mieux.
Par contre... j'espère que tu n'as pas bêtement copié le code ... mais que cette fois tu vas essayer de le comprendre......
(Ainsi que lu les consignes)
J'ai compris le fonctionnement et adapté à ce que je voulais mettre.
Merci encore !
Bonne journée !