Changer la classe d'une DIV onglet

Résolu
Shuta -  
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 : 

<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 !

3 réponses

  1.  Shuta Auteur
    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 

    $(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.
    1
    1. jordane45 Modérateur
      Ainsi j'ai enlevé tous les onClick

      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 marche très bien et peut être utilisé sur d'autres effets de la page sans que ça ne cause de bug.

      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......
      0
    2. Shuta Auteur
      @jordane45Oui, le code d'origine que j'ai trouvé, j'ai un peu bidouiller pour comprendre ce que faisait quoi !
      (Ainsi que lu les consignes)

      J'ai compris le fonctionnement et adapté à ce que je voulais mettre.

      Merci encore !
      0
    3. jordane45 Modérateur
      Dans ce cas... merci de mettre le sujet en RESOLU.
      0
    4. Shuta Auteur
      C'est déjà fait ! :3

      Bonne journée !
      0
  2. jordane45 Modérateur
    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.

    0
    1. Shuta Auteur
      "J'arrive pas à changer la class des div avec les Onclick... " 
      <div class="ongl_act" onClick="switchOnglet('onglet_news_1','div_onglet')">Cat 1</div>
      0
    2. jordane45 Modérateur
      @ShutaMais tu veux mettre QUELLE CLASS ??
      0
    3. Shuta Auteur
      Ajouter une classe comme "active" en plus de "ongl_act"
      0
    4. Thorak83
      Bonjour,

      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");
      0
    5. Shuta Auteur
      @Thorak83Le coup de l'ID marche oui merci, j'avais testé ça.
      Seulement je ne sais pas du tout comment l'intégrer dans le code que j'ai.

      Ou bien devrais je refaire un code à zéro ?
      Je n'excelle pas dans le JavaScript :/

      Merci beaucoup !
      0
  3. jordane45 Modérateur
    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                                                                 
    0
    1. Shuta Auteur
      Ce n'est pas du tout ce dont je souhaite faire ._.
      Là ça modifie la div de l'onglet qui apparait disparait.

      Je veut modifier les boutons où il y a les onClick (Cat 1, Cat 2 et Cat 3)...
      Pas les div qu'ils font apparaitre.
      0
    2. jordane45 Modérateur
      Aaah ...
      Ben dans ce cas faut appliquer la même mecanique mais sur les boutons...
      Ce n'est pas bien compliqué
      En t"inspirant de mon code tu devrais y arriver non ?
      0

Discussions similaires

Code source couleur de fond
Mehdi-Amg

9 réponses
couleur personnage
Gasper

9 réponses