Signaler

Changer la classe d'une DIV onglet [Résolu]

Posez votre question Shuta 177Messages postés samedi 28 février 2015Date d'inscription 15 septembre 2016 Dernière intervention - Dernière réponse le 15 sept. 2016 à 16:01
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 !
Afficher la suite 
Utile
+1
moins plus
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.
jordane45 14481Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 22 septembre 2016 Dernière intervention - 15 sept. 2016 à 12:46
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......
Répondre
Shuta 177Messages postés samedi 28 février 2015Date d'inscription 15 septembre 2016 Dernière intervention - 15 sept. 2016 à 13:41
Oui, 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 !
Répondre
jordane45 14481Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 22 septembre 2016 Dernière intervention - 15 sept. 2016 à 13:42
Dans ce cas... merci de mettre le sujet en RESOLU.
Répondre
Shuta 177Messages postés samedi 28 février 2015Date d'inscription 15 septembre 2016 Dernière intervention - 15 sept. 2016 à 16:01
C'est déjà fait ! :3

Bonne journée !
Répondre
Ajouter un commentaire
Utile
+0
moins plus
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.

Shuta 177Messages postés samedi 28 février 2015Date d'inscription 15 septembre 2016 Dernière intervention - 13 sept. 2016 à 15:23
Le 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 !
Répondre
AssassinTourist 5245Messages postés lundi 16 janvier 2012Date d'inscription 22 septembre 2016 Dernière intervention - 13 sept. 2016 à 15:41
Bonjour,

Quel élément ne sais-tu pas où placer ?
- l'id -> Thorak83 t'a fourni l'endroit où le placer
- le js qui add et remove active -> dans ta méthode switchOnglet

Autre chose ?
Répondre
Shuta 177Messages postés samedi 28 février 2015Date d'inscription 15 septembre 2016 Dernière intervention - 13 sept. 2016 à 16:21
Eh bien quand j'ajoute le js qui add ou remove active eh bien ca me l'ajoute peu importe l'onglet que je clique...
Je n'arrives pas a m'en sortir...
Le code fourni est dans le 1er message du problème =<

Merci pour l'aide !
Répondre
jordane45 14481Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 22 septembre 2016 Dernière intervention - 13 sept. 2016 à 16:25
Qu'as tu tenté exactement ?
Sachant que
ici :
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';
 }
 

Tu ENLVE la class ACTIVE


et là :
 //on affiche l'onglet identifié par son id
 var ong = document.getElementById(id_elm);
    ong.style.display = '';
}


Tu AJOUTES la class ACTIVE

Je te laisse ajouter les bouts de code necessaires en te basant sur la réponse de Thorak
Répondre
Shuta 177Messages postés samedi 28 février 2015Date d'inscription 15 septembre 2016 Dernière intervention - 13 sept. 2016 à 19:23
function switchOnglet(id_elm,strClassName){
var onglets = getElementsByClassName(strClassName);
var cat = "cat"
console.log(onglets);
//on masque tous les onglets
for(var i=0; i<onglets.length; i++){
onglets[i].style.display = 'none';
document.getElementById('cat1').classList.remove("active");
}

//on affiche l'onglet identifié par son id
var ong = document.getElementById(id_elm);
ong.style.display = '';
document.getElementById('cat1').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;
}


Voici le code fait !

Peut importe le bouton appuyé il me met la class "active" et ne me la vire JAMAIS !
C'est ce que j'ai déjà dit mais il semblerai qu'on ne me comprenne pas des masses...

Peut importe l'onglet que je choisis ça va m'afficher la class "active" dans la div où il y a l'id cat1.

Et jamais ne sera retiré...
D'où le fait que je demande OU placer le js correctement...
Répondre
Ajouter un commentaire
Utile
+0
moins plus
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                                                                 
Shuta 177Messages postés samedi 28 février 2015Date d'inscription 15 septembre 2016 Dernière intervention - 14 sept. 2016 à 01:47
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.
Répondre
jordane45 14481Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 22 septembre 2016 Dernière intervention - 14 sept. 2016 à 09:05
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 ?
Répondre
Ajouter un commentaire

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !