Erreur child

Résolu
Bonjour,

j'ai une petite érreur

TypeError: node is null

var child_nodes_temp = node.childNodes;

    function childs(node)
    {
        var child_nodes_temp = node.childNodes;
        var child_nodes = new Array();
        for(var k = 0; k < child_nodes_temp.length; k++)
        {
            if(child_nodes_temp[k].nodeType == 1)
            {
                child_nodes.push(child_nodes_temp[k]);
            }
        }
        return child_nodes;
    }


merci de votre aide

il faut mettre une condition avec if ou else

si vous pouvez prendre le temps merci de votre aide

10 réponses

  1. Modérateur
    Bonjour,

    Tu peux en effet mettre un if ....
    par exemple :
    function childs(node)
    {
      var child_nodes = new Array();
      if(typeof(node) !='undefined' && node != null ){
         var child_nodes_temp = node.childNodes;
         for(var k = 0; k < child_nodes_temp.length; k++) {
           if(child_nodes_temp[k].nodeType == 1) {
              child_nodes.push(child_nodes_temp[k]);
           }
        }
      }
     return child_nodes;
    }
    


    1. merci j'ai c corriger et ca me fait une autre erreur

      j'ai remplacer ce code

          function next(node)
          {
              var next = node.nextSibling;
              while(next && next.nodeType != 1)
              {
                  next = next.nextSibling;
              }
              return next;
          }
          /*
              Retourne les Noeud du DOM (hors noeud de text) enfants du node donné
          */
      


      par

          function next(node)
          {
              var next = node.nextSibling;
        if(typeof(next) !='undefined' && next != null ){
              while(next && next.nodeType != 1)
         if(next[k].nodeType == 1) {       {
                  next = next.nextSibling;
        }
              }
              }
              return next;
          }
      


      il me met toujours cete ereur

      ReferenceError: k is not defined
      	
      
      if(next[k].nodeType == 1) {       {
      
      	


      et ensuite on vera apres on ferra bug par bug

      merci
  2. bonsoir donc j'ai refait le code

        function next(node)
        {
     if(node.nextSibling == 1) {   
     
     var next = node.nextSibling;
     
     if(next.nodeType == 1) { 
     while(next && next.nodeType != 1)
            {
                next = next.nextSibling;
              }
           }
             }
           return next;
        }
    


    il me dit

    TypeError: node is undefined
    	
    
    if(node.nextSibling == 1) {


    merci
    1. Modérateur
      Où est passé le code que je t'ai donné ????
      Tu passes un paramètre : node ... avant de l'utiliser... il serait bien de t'assurer qu'il existe et n'est pas null .... d'où le code que je t'avais donné !
       if(typeof(node) !='undefined' && node != null){
      


      par contre.... que veux tu faire avec ton code ???
      Si c'est pour trouver le dernier élément.... il existe le lastElementChild tu sais ?
  3. enfaîte je te donne le code entier sans les modification faite afin que tu puisses voir si c'est bien ou il faut une petite modification à recorriger

    /*
            On récupčre la SECTION principale.
            C'est dans celle-ci que le script va travailler
        */
        var main_section = document.getElementById('main_section');
         
        /*
            On initialise les MENUs et les PAGEs
            C'est ŕ dire qu'on active le premier
                TAB (onglet) de chaque SECTION
                et on affiche la PAGE correspondante
        */
        var menu = childs(main_section)[1];
        reset(menu);
         
        /*
            Cette fonction va selectionner le premier TAB du MENU fourni,
                et afficher la PAGE correspondante en faisant un RESET des
                MENUs qui sont dans le CONTENT
        */
        function reset(menu)
        {
            // En paralčlle au menu est le contenu Cf HTML
            var content = next(menu);
             
            // On reset le menu courant
            var tabs = childs(menu);
            for(var k = 0; k < tabs.length; k++)
            {
                // Si c'est le premier onglet du menu
                if(k == 0)
                {
                    $(tabs[k]).removeClass('unactive').addClass('active');
                    tabs[k].onclick = function(){ return false; };
                }
                // Sinon ..
                else
                {
                    $(tabs[k]).removeClass('active').addClass('unactive');
                    tabs[k].onclick = function(){ click(this); };
                }
            }
             
            // On reset les pages courantes
            var pages = childs(content);
            for(var k = 0; k < pages.length; k++)
            {
                if(k == 0)
                {
                    $(pages[k]).removeClass('undisplayed').addClass('displayed');
                }
                else
                {
                    $(pages[k]).removeClass('displayed').addClass('undisplayed');
                }
            }
             
            // On RESET les menus des pages
            var menus = content.getElementsByClassName('menu');
            for(var k = 0; k < menus.length; k++)
            {
                reset(menus[k]);
            }
        }
        /*
            Cette fonction selectionne le TAB fourni, active la PAGE correspondante,
                et RESET les MENUs du CONTENT.
        */
        function click(tab)
        {
            // Menu et content
            var menu = tab.parentNode;
            var content = next(menu);
             
            // On reset le menu courant
            var tabs = childs(menu);
            var n = -1;
            for(var k = 0; k < tabs.length; k++)
            {
                // Si c'est l'onglet sur lequel on a cliqué
                if(tabs[k] == tab)
                {
                    n = k;
                    $(tabs[k]).removeClass('unactive').addClass('active');
                    tabs[k].onclick = function(){ return false; };
                }
                // Sinon ...
                else
                {
                    $(tabs[k]).removeClass('active').addClass('unactive');
                    tabs[k].onclick = function(){ click(this); };
                }
            }
             
            // On reset les pages courantes
            var pages = childs(content);
            for(var k = 0; k < pages.length; k++)
            {
                if(k == n)
                {
                    $(pages[k]).removeClass('undisplayed').addClass('displayed');
                }
                else
                {
                    $(pages[k]).removeClass('displayed').addClass('undisplayed');
                }
            }
             
            // On reset les menus des pages courantes
            var menus = content.getElementsByClassName('menu');
            for(var k = 0; k < menus.length; k++)
            {
                reset(menus[k]);
            }
        }
         
        /*
            Retourne le Noeud du DOM (hors noeud de text) suivant le node donné
        */
        function next(node)
        {
            var next = node.nextSibling;
            while(next && next.nodeType != 1)
            {
                next = next.nextSibling;
            }
            return next;
        }
        /*
            Retourne les Noeud du DOM (hors noeud de text) enfants du node donné
        */
        function childs(node)
        {
            var child_nodes_temp = node.childNodes;
            var child_nodes = new Array();
            for(var k = 0; k < child_nodes_temp.length; k++)
            {
                if(child_nodes_temp[k].nodeType == 1)
                {
                    child_nodes.push(child_nodes_temp[k]);
                }
            }
            return child_nodes;
        }


    il y a une erreur à ligne

    TypeError: node is null
    	
    
    var child_nodes_temp = node.childNodes;
    
    	
    container.js (ligne 134, col. 13)


    j'ai remplacer ce code :

        function childs(node)
        {
            var child_nodes_temp = node.childNodes;
            var child_nodes = new Array();
            for(var k = 0; k < child_nodes_temp.length; k++)
            {
                if(child_nodes_temp[k].nodeType == 1)
                {
                    child_nodes.push(child_nodes_temp[k]);
                }
            }
            return child_nodes;
        }


    par

    function childs(node)
    {
      var child_nodes = new Array();
      if(typeof(node) !='undefined' && node != null ){
         var child_nodes_temp = node.childNodes;
         for(var k = 0; k < child_nodes_temp.length; k++) {
           if(child_nodes_temp[k].nodeType == 1) {
              child_nodes.push(child_nodes_temp[k]);
           }
        }
      }
     return child_nodes;
    }


    ensuite une erreur à ligne

    TypeError: node is undefined
    	
    
    var next = node.nextSibling;
    
    	
    container.js (ligne 122, col. 13


    j'ai remplacer ce code :

        function next(node)
        {
            var next = node.nextSibling;
            while(next && next.nodeType != 1)
            {
                next = next.nextSibling;
            }
            return next;
        }
    


    par

        function next(node)
        {
       if(typeof(next) !='undefined' && next != null ){
           var next = node.nextSibling;
            while(next && next.nodeType != 1)
            {
                next = next.nextSibling;
      }
            }
            return next;
        }
    


    ensuite ca me fait une erreur à ligne

    TypeError: content is undefined
    	
    
    var menus = content.getElementsByClassName('menu');
    
    	
    container.js (ligne 59, col. 13)
    TypeError: content is undefined
    	
    
    var menus = content.getElementsByClassName('menu');
    
    	
    container.js (ligne 110, col. 13)


    j'ai un doute pour remplacer

    le code ligne 59

            // On RESET les menus des pages
            var menus = content.getElementsByClassName('menu');
            for(var k = 0; k < menus.length; k++)
            {
                reset(menus[k]);
            }
    


    le code ligne 110

            // On reset les menus des pages courantes
            var menus = content.getElementsByClassName('menu');
            for(var k = 0; k < menus.length; k++)
            {
                reset(menus[k]);
            }
    


    voilà ou j'en suis

    le code est censé quand tu clique sur un menu ca change de page
    1. Modérateur
      Plusieurs choses me choquent dans ton code....
      déjà... pourquoi mélanges tu du jquery et du javascript 'standard' ?
      Ensuite... pourquoi as tu deux class : active et unactive ? ...... si un menu est actif ... il a la class active.... sinon il ne l'a pas..... je ne vois pas l'interet d'en avoir deux.

      En plus ... sans avoir le HTML qui va avec... ton code ne me sert à rien !

      Ta fonction reset ... pourrait se résumer à
      $('.menu').removeClass('active');
      $('.menu').first().addClass('active');
      
  4. merci

    voilà le html

                                                                                                     <!--  <!-- D&eacutebut Menu MainSection -->
    
     <section id="main_section" class="section">
    																								 																								 
    																								 <!-- MEME SI VIDE, TOUJOURS LAISSER CE H2 - LE CSS PEUT LE RENDRE INVISIBLE EN CAS DE BESOIN
    																								 SI VRAIMENT GENANT, IL PEUT ETRE RETIRER A CONDITION DE REMPLACER "childs(MainSection)[1]"
    																								 PAR childs(MainSection)[0] ET DE FAIRE ATTENTION ... -->
    																								 
    																								 <h2> </h2>
    
    																								 <!-- D&eacutebut Menu principaux -->
    																								
    																								 <ul class="menu">
    																												  <li class="tab icon-minichatconversationsupprimer">Les salons</li>
    																												  <li class="tab icon-minichatconversationsupprimer">#1salon</li>
    																												  <li class="tab icon-minichatconversationsupprimer">#2salon</li>
    																												  <li class="tab icon-minichatconversationsupprimer">#3salon</li>
    																												  <li class="tab icon-minichatconversationsupprimer">#4salon</li>
    																												  <li class="tab icon-minichatconversationsupprimer">#5salon</li>
    																												  <li class="tab icon-minichatconversationsupprimer">pseudo</li>
    																												  <li class="tab icon-minichatconversationsupprimer">pseudo</li>
    																												  <li class="tab icon-minichatconversationsupprimer">pseudo</li>
    																												  <li class="tab icon-minichatconversationsupprimer">pseudo</li>
    																												  <li class="tab icon-minichatconversationsupprimer">pseudo</li>
    																								 </ul>
    																								
                              <!-- D?but de la content -->
    						  
    						  <div class="content">
    						  
    						                       <!-- D&eacutebut de la page Site-->
    											   
    											   <div class="page">
    											   
    											                     <!-- D&eacutebut de la content -->
    																 
    																 <div class='content'>
    																 
    																                      <!-- D&eacutebut de la page Site -->
    																					  
    																					  <div class='page'>
                                                                                                     
    																								                 <!-- D&eacutebut Menu section -->
    																												 
    																												 <div class="section">
    																								                                      <!-- D&eacutebut de la Menu -->
    																																	  
    																																	  <ul class="menu" id="menuminisalon">
    																																	                                      <li class="tab bouton_gauche">Salons Officiels</li>
    																																										  <li class="tab bouton_gauche">Salons Perso</li>
    																																										  <li class="tab bouton_droite">
    																																										  <button type="button" class="buttons poplight" data-width="500" data-rel="creersalon
    
    


    la si tu clique sur le menu salon 2 ca affiche le salon 2 donc il sera active les autre inactif

    le css sera

    /*********************************************************************************************************Début des menus contenaires****************************************************************************************************************************/
    
    
          #main_section
    	  {
    	  /* PAS NECESSAIRE POUR LE SCRIPT */
    	  width:auto;
    /*	  background-color:#CC00FF;*/
    	  }
    	  
    	  .section
    	  {
    	  /* PAS NECESSAIRE POUR LE SCRIPT */
    /*	  padding : 10px;*/
    /*	  background:#993399;*/
    	  }
    	  
          ul.menu
    	  {
    	  display:inline-flex;
    	  list-style-type:none; /* Car sinon les puces se placent n'importe o? */
    	  color:#000000;
    	  }
    
    	  ul.menu li
    	  {
    	  padding:0.625em;/* top right bottom left */
    	  }
    
    	  .tab
    	  {
    	  /* PAS NECESSAIRE POUR LE SCRIPT */
    	  padding : 5px;
    	  margin : 0 5px 0 0;
    	  float : left;
    	  position : relative;
    	  top : 1px;
    	  cursor : pointer;
    	  }
    	  
    	  .active     /* Les onglets selectionnés */
    	  {
    	  /* PAS NECESSAIRE POUR LE SCRIPT */
    /*    background : white;*/
          border : 1px solid #CCCCCC;
    	  border-bottom : 0px;
    	  }
    	  
    	  .unactive   /* Les onglets non selectionnés */
    	  {
    	  /* PAS NECESSAIRE POUR LE SCRIPT */
    /*    background : rgb(50,205,50);*/
    /*      border : 1px solid #CCCCCC;*/
    /*	  border-bottom : 0px;*/
    	  }
    	  
    	  .content
    	  {
    	  /* PAS NECESSAIRE POUR LE SCRIPT */
    /*    background : white;*/
          clear : both;
    /*	  overflow:hidden;*/
    	  }
    	  
    	  .page
    	  {
    	  /* PAS NECESSAIRE POUR LE SCRIPT */
    	  background : white;
    	  }
    	  
    	  .displayed      /* Les pages affichées */
    	  {
    	  }
    	  
    	  .undisplayed    /* Les pages non affichées */
    	  {
    	  /* NECESSAIRE POUR LE SCRIPT !!!! */
    	  display : none;
    	  }
    
    /*********************************************************************************************************Fin des menus contenaires******************************************************************************************************************************/
    


    là je t'ai tout mis

    si ta une autre méthode mieux que celui là
    avec un plaisir

    là je suis toujours bug sur ligne 59 js
    1. j'ai corriger les bugs donc il n'y a plus de bug mais le script ne fonctionne pas quand je clique surles menue et sous menu

      voilà le code que j'ai recoriger

      /*
              On récupčre la SECTION principale.
              C'est dans celle-ci que le script va travailler
          */
          var main_section = document.getElementById('main_section');
           
          /*
              On initialise les MENUs et les PAGEs
              C'est ŕ dire qu'on active le premier
                  TAB (onglet) de chaque SECTION
                  et on affiche la PAGE correspondante
          */
          var menu = childs(main_section)[1];
          reset(menu);
           
          /*
              Cette fonction va selectionner le premier TAB du MENU fourni,
                  et afficher la PAGE correspondante en faisant un RESET des
                  MENUs qui sont dans le CONTENT
          */
          function reset(menu)
          {
              // En paralčlle au menu est le contenu Cf HTML
              var content = next(menu);
               
              // On reset le menu courant
              var tabs = childs(menu);
              for(var k = 0; k < tabs.length; k++)
              {
                  // Si c'est le premier onglet du menu
                  if(k == 0)
                  {
                      $(tabs[k]).removeClass('unactive').addClass('active');
                      tabs[k].onclick = function(){ return false; };
                  }
                  // Sinon ..
                  else
                  {
                      $(tabs[k]).removeClass('active').addClass('unactive');
                      tabs[k].onclick = function(){ click(this); };
                  }
              }
               
              // On reset les pages courantes
              var pages = childs(content);
              for(var k = 0; k < pages.length; k++)
              {
                  if(k == 0)
                  {
                      $(pages[k]).removeClass('undisplayed').addClass('displayed');
                  }
                  else
                  {
                      $(pages[k]).removeClass('displayed').addClass('undisplayed');
                  }
              }
               
              // On RESET les menus des pages
        if(typeof(menus) !='undefined' && menus != null ){
              var menus = content.getElementsByClassName('menu');
              for(var k = 0; k < menus.length; k++)
              {
                  reset(menus[k]);
              }
               }
         }
          /*
              Cette fonction selectionne le TAB fourni, active la PAGE correspondante,
                  et RESET les MENUs du CONTENT.
          */
          function click(tab)
          {
              // Menu et content
              var menu = tab.parentNode;
              var content = next(menu);
               
              // On reset le menu courant
              var tabs = childs(menu);
              var n = -1;
              for(var k = 0; k < tabs.length; k++)
              {
                  // Si c'est l'onglet sur lequel on a cliqué
                  if(tabs[k] == tab)
                  {
                      n = k;
                      $(tabs[k]).removeClass('unactive').addClass('active');
                      tabs[k].onclick = function(){ return false; };
                  }
                  // Sinon ...
                  else
                  {
                      $(tabs[k]).removeClass('active').addClass('unactive');
                      tabs[k].onclick = function(){ click(this); };
                  }
              }
               
              // On reset les pages courantes
              var pages = childs(content);
              for(var k = 0; k < pages.length; k++)
              {
                  if(k == n)
                  {
                      $(pages[k]).removeClass('undisplayed').addClass('displayed');
                  }
                  else
                  {
                      $(pages[k]).removeClass('displayed').addClass('undisplayed');
                  }
              }
               
              // On reset les menus des pages courantes
        if(typeof(menus) !='undefined' && menus != null ){
              var menus = content.getElementsByClassName('menu');
              for(var k = 0; k < menus.length; k++)
              {
                  reset(menus[k]);
              }
               }
          }
           
          /*
              Retourne le Noeud du DOM (hors noeud de text) suivant le node donné
          */
          function next(node)
          {
         if(typeof(next) !='undefined' && next != null ){
             var next = node.nextSibling;
              while(next && next.nodeType != 1)
              {
                  next = next.nextSibling;
        }
              }
              return next;
          }
          /*
              Retourne les Noeud du DOM (hors noeud de text) enfants du node donné
          */
      function childs(node)
      {
        var child_nodes = new Array();
        if(typeof(node) !='undefined' && node != null ){
           var child_nodes_temp = node.childNodes;
           for(var k = 0; k < child_nodes_temp.length; k++) {
             if(child_nodes_temp[k].nodeType == 1) {
                child_nodes.push(child_nodes_temp[k]);
             }
          }
        }
       return child_nodes;
      }


      merci
      1. Modérateur
        Grosso modo.... tout ton code peut se traduire par :
        
            // initialisation : Aucun menu selectionné
            raz_menu();
        	
            // 	On retire la class active à tous les items du menu
        	function raz_menu(){
        	  $('#main_section > .menu > .tab').removeClass('active');
        	}
        	
        	// lors du clic sur un item .. 
        	$('#main_section > .menu > .tab').click(function(){
        	  raz_menu();   // On retire la class active à tous les items du menu
                  $(this).addClass('active'); // on lui met la class active
        	});
        
        


        du moins... pour le menu "principal".
        Après... je ne sais pas de quoi tu parles lorsque tu parles des sous-menus vu que ton code html n'est pas complet....
        Mais bon.. ça te donne une idée de comment ça marche.

        Tu remarqueras que je n'ai pas mélangé de "pur" javascript et de jquery... TOUT est en jquery !

        1. les sous menu

          je t'ai fait une capture

          http://hpics.li/060669c

          là ta l'onglet salon avec son sous menu qui salon officielle et perso

          ensuite si tu clique sur #2salon

          tu ne verras plus les sous menu perso et officielle car il appartient a celle du 1 onglet les salons et pas les autres

          en espérant tu peut cliquer sur la capture d'ecrant
      2. Modérateur
        Donc :

        1 - Ajout d'une class "fictive" pour identifier les sous-menus
         <ul class="menu sousmenu"  id="menuminisalon">
        


        2 - Dans ton menu, ajout d'une info permettant d'indiquer l'id du sous menu à afficher :
        par exemple :
        <ul class="menu">
        	  <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon">Les salons</li>
        	  <li class="tab icon-minichatconversationsupprimer">#1salon</li>
        	  <li class="tab icon-minichatconversationsupprimer">#2salon</li>
        	  <li class="tab icon-minichatconversationsupprimer">#3salon</li>
        


        ici : data-sm="menuminisalon" pour le premier menu.

        Puis le code js complet :
            // initialisation : Aucun menu selectionné
            raz_menu();
        	
            // 	On retire la class active à tous les items du menu
        	function raz_menu(){
        	  $('#main_section > .menu > .tab').removeClass('active'); // on retire tous les class active des menus
        	  $('.sousmenu').css("display", "none"); // tous les sous-menus sont masqués par défaut
        	}
        	
        	// lors du clic sur un item .. on lui met la class active
        	$('#main_section > .menu > .tab').click(function(){
        	  raz_menu();
        	  $(this).addClass('active'); 
        	  //affichage du sous-menu
        	  var id_sm = $(this).data('sm'); //on recupere l'id du sous-menu à afficher
        	  $("#"+id_sm).css("display", "block"); // on l'affiche
        	
        	});
        	
        	//lors du clic sur un sous-menu
        	$('.sousmenu > .tab').click(function(){
        	  $('.sousmenu > .tab').removeClass('active'); // on retire tous les "active" aux sous-menus
        	  $(this).addClass('active');  // on met la class active au menu cliqué
        	});
        
        1. merci mais il n'y a pas de bug mais ca ne marche toujours pas

          je t'ai fait une page avec l'ancien code

          http://communautaire.legtux.org/V1/module/contenaireavant.php

          afin que tu puisse clique sur les onglets tu veras ceux qui appairait a chaque onglet et sous menu voir ceux que j'aimerais faire

          maintenant voilà la page avec les modification apporté avec toi

          http://communautaire.legtux.org/V1/module/contenaireapres.php

          les phrase disparaît pas lors du clique

          si tu veux on reprend ca demain
          1. Modérateur
            En même temps ... tu n'as pas TOUT fait comme je te l'ai dit ...
            <!-- la on affiche encores des menu qui seront les sous menu du menu les salons -->
            <ul  class="menu" id="menuminisalon">
              <li class="tab bouton_gauche">Salons Officiels</li>
              <li class="tab bouton_gauche">Salons Perso</li>
              <li class="tab bouton_droite">
              <button type="button" class="buttons poplight" data-width="500" data-rel="creersalon">Créer un salon</button>
              </li>
            </ul>             
            

            Où est la class SOUSMENU ??
          2. Modérateur
            @jordane45après ... pour l'affichage ou non des div correspondantes à tes sous-menus... là je te laisse faire.
            Je t'ai largement donné de quoi comprendre comment faire....
            Il faut que tu le fasses avec la même logique.
            - Une class pour pouvoir les manipuler (par exemple tu peux utiliser la class "page")
            - Un id pour identifier la page à afficher
            - un attribut DATA quelquechose (
            data-page='id_de_la_page' 
            par exemple ) dans le sous-menu pour identifier la page à afficher...
          3. je verrais ca et je te tiendrais au courrant

            merci
        2. je revien vers toi pour te dire j'ai compris mais ca fonctionne mai pas comi fault

          voilà la page teste

          je sais que je me suis tromper mais là je sèche

          je vais t'expliquer precisement

          qd tu actualise la page
          actuellement pour voir les sous menu il faut cliquer

          mais il faut lui dire sauf les 1, er onglet du menu et sous menu afin qu'on puisse voir le texte du 1 er onglet afin d’éviter de cliquer

          pour les sous menu ca ne veut pas cliquer

          j'ai bien mis data diffierent a chaque li

          je te met la page modifier

          http://communautaire.legtux.org/V1/module/contenaire.php

          et le code

          <!DOCTYPE html>
          <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr" class="vbulletin_html">
          <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width" /><title>Document sans titre</title>
          <link rel="stylesheet" type="text/css" href="http://communautaire.legtux.org/V1/design/Basic/style.css">
          </head>
          <body>
          
          
                                                                                                           <!-- D&eacutebut Menu MainSection -->
          
                                                                                                           <section id="main_section" class="section">
          																								 																								 
          																								 <!-- MEME SI VIDE, TOUJOURS LAISSER CE H2 - LE CSS PEUT LE RENDRE INVISIBLE EN CAS DE BESOIN
          																								 SI VRAIMENT GENANT, IL PEUT ETRE RETIRER A CONDITION DE REMPLACER "childs(MainSection)[1]"
          																								 PAR childs(MainSection)[0] ET DE FAIRE ATTENTION ... -->
          																								 
          																								 <h2> </h2>
          
          																								 <ul class="menu">
          																												  <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon">Les salons</li>
          																												  <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon1">#1salon</li>
          																												  <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon2">#2salon</li>
          																												  <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon3">#3salon</li>
          																								 </ul>
          
          
          
          
                                                                                                           <!--début on affiche les les salon officielle et perso-->
          																								 <div class="menu" id="menuminisalon">
          																								 
          																								                  <ul class="menu">
          																												  <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalonofficielle">Les salons offocielle</li>
          																												  <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalonperso">Les salons perso</li>
          																												  </ul>
          																								 
                                                                                                           <!--début on affiche les salon officielle-->																						   
          																								 <div class="menu" id="menuminisalonofficielle">officielle</div>
          																								 <!--Fin on affiche les salon officielle-->																						   
          																								 <!--début on affiche les salon perso-->																						   
          																								 <div class="menu sousmenu" id="menuminisalonperso">perso</div>
          																								 <!--Fin on affiche les salon perso-->																						   
          																								 </div>
          																								 <!--Fin on affiche les les salon officielle et perso-->
          																								 
          																								 
          																								 
          																								 <!--début on affiche les les salon 1-->																						   
          																								 <div class="menu sousmenu"  id="menuminisalon1">on affiche le 1 salon</div>
          																								 <!--Fin on affiche les les salon 1-->
          																								 
          																								 
          																								 <!--début on affiche les les salon 2-->
          																								 <div class="menu sousmenu" id="menuminisalon2">on affiche le 2 salon</div>
          																								 <!--fin on affiche les les salon 2-->
          																								 
          																								 
          																								 <!--début on affiche les les salon 3-->
          																								 <div class="menu sousmenu" id="menuminisalon3">on affiche le 3 salon</div>
          																								 <!--fin on affiche les les salon 3-->
          
          																								 </section>
          																								 
                                                                                                           <!-- Fin Menu MainSection -->
          
          
          <script type="text/javascript" src="http://communautaire.legtux.org/V1/includes/jquery/jquery-1.12.3.min.js"></script>
          
          <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
          
          <script type="text/javascript">
             // initialisation : Aucun menu selectionné
              raz_menu();
          	
              // 	On retire la class active à tous les items du menu
          	function raz_menu(){
          	  $('#main_section > .menu > .tab').removeClass('active'); // on retire tous les class active des menus
          	  $('.sousmenu').css("display", "none"); // tous les sous-menus sont masqués par défaut
          	}
          	
          	// lors du clic sur un item .. on lui met la class active
          	$('#main_section > .menu > .tab').click(function(){
          	  raz_menu();
          	  $(this).addClass('active'); 
          	  //affichage du sous-menu
          	  var id_sm = $(this).data('sm'); //on recupere l'id du sous-menu à afficher
          	  $("#"+id_sm).css("display", "block"); // on l'affiche
          	
          	});
          	
          	//lors du clic sur un sous-menu
          	$('.sousmenu > .tab').click(function(){
          	  $('.sousmenu > .tab').removeClass('active'); // on retire tous les "active" aux sous-menus
          	  $(this).addClass('active');  // on met la class active au menu cliqué
          	});
          	
          	
          	
          	
          	
          		</script>
          
          
          
          </body>
          </html>
          


          en attendant ta réponse je vais reflechir

          merci
          1. Modérateur
            Voila :

            <!DOCTYPE html>
            <html lang="fr">
            <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width">
             <title>Document sans titre</title>
             <!-- CSS -->
             <link rel="stylesheet" type="text/css" href="http://communautaire.legtux.org/V1/design/Basic/style.css">
             <!-- JQUERY -->
             <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
             </head>
            <body>
             <!-- Début Menu MainSection -->
             <section id="main_section" class="section">
            
             <h2> </h2>
            
             <ul class="menu">
              <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon">Les salons</li>
              <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon1">#1salon</li>
              <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon2">#2salon</li>
              <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon3">#3salon</li>
             </ul>
            
             <!--début on affiche les les salon officielle et perso-->
             <div class="sousmenu" id="menuminisalon">
              <ul class="menu">
              <li class="tab icon-minichatconversationsupprimer" data-page="menuminisalonofficielle">Les salons offocielle</li>
              <li class="tab icon-minichatconversationsupprimer" data-page="menuminisalonperso">Les salons perso</li>
              </ul>
             
             <!--début on affiche les salon officielle-->																						   
             <div class="page" id="menuminisalonofficielle">officielle</div>
             <!--Fin on affiche les salon officielle-->																						   
             <!--début on affiche les salon perso-->																						   
             <div class="page" id="menuminisalonperso">perso</div>
             <!--Fin on affiche les salon perso-->																						   
             </div>
             <!--Fin on affiche les les salon officielle et perso-->
             
             
             
             <!--début on affiche les les salon 1-->																						   
             <div class="sousmenu "  id="menuminisalon1">on affiche le 1 salon</div>
             <!--Fin on affiche les les salon 1-->
             
             
             <!--début on affiche les les salon 2-->
             <div class="sousmenu " id="menuminisalon2">on affiche le 2 salon</div>
             <!--fin on affiche les les salon 2-->
             
             
             <!--début on affiche les les salon 3-->
             <div class="sousmenu " id="menuminisalon3">on affiche le 3 salon</div>
             <!--fin on affiche les les salon 3-->
            
             </section>
             
             <!-- Fin Menu MainSection -->
            
            <script type="text/javascript">
               // initialisation : Aucun menu selectionné
                raz_menu();
            	init_menu(); //affichage du premier menu par défaut
            	
            	
            	function init_menu(){
            	  var premier_menu = $('#main_section > .menu > .tab').first();
            	  premier_menu.addClass('active');
            	  var id_sm = premier_menu.data('sm'); //on recupere l'id du sous-menu à afficher
            	  $("#"+id_sm).css("display", "block"); // on l'affiche
            	   $("#"+id_sm + '> ul > li.tab').first().addClass('active');
            
                  var id_page = $("#"+id_sm +  '> ul > li.tab').first().data('page'); // on récupère l'id de la page (la div) à afficher
            	  $("#"+id_page ).css("display", "block"); // on affiche LA page selectionnée dans le sous-menu
            	}
            	
                // 	On retire la class active à tous les items du menu
            	function raz_menu(){
            	  $('#main_section > .menu > .tab').removeClass('active'); // on retire tous les class active des menus
            	  $('div.sousmenu').css("display", "none"); // tous les sous-menus sont masqués par défaut
            	  $('div.sousmenu > ul > li.tab').removeClass('active'); 
            	  $('div.page').css("display", "none"); // toutes les pages sont masquées par défaut
            	}
            	
            	// lors du clic sur un item .. on lui met la class active
            	$('#main_section > .menu > .tab').click(function(){
            	  raz_menu();
            	  $(this).addClass('active'); 
            	  //affichage du sous-menu
            	  var id_sm = $(this).data('sm'); //on recupere l'id du sous-menu à afficher
            	  $("#"+id_sm).css("display", "block"); // on l'affiche
            	
            	});
            	
            	//lors du clic sur un sous-menu
            	$('.sousmenu > ul >li.tab').click(function(){
            	  $('.sousmenu > ul >li.tab').removeClass('active'); // on retire tous les "active" aux sous-menus
            	  $(this).addClass('active');  // on met la class active au menu cliqué
            	  
            	  var id_page = $(this).data('page'); // on récupère l'id de la page (la div) à afficher
            	    $('div.page').css("display", "none"); // toutes les pages sont masquées par défaut
            	   $("#"+id_page).css("display", "block"); // on affiche LA page selectionnée dans le sous-menu
            	  
            	});
            	
            </script>
            
            
            
            </body>
            </html>
            


            Il y aura encore sûrement des ajustements à faire ...
            Mais cette fois..; TU PEUX t'en charger.

            Qui qu'il en soit... ta question initiale est traitée. Tu peux donc mettre cette discussion en RESOLUE et, si tu as d'autres questions/soucis ... ouvrir une nouvelle discussion.

            Bonne nuit.

            1. merci je met la question résolu
              peut être je reviendrais te demander 1 ou 2 petit conseille mais sur html

              en tout cas je vais essayer d'analyser et remettre tout
            2. excuse moi juste une petite question là ça fonctionne bien
              là on s'est occuper le cadre activ lors du 1 e r clique

              mais on a oublier de remettre les autres cadres qu'on a pas encore cliquer qui ont la class unactive

              es ce que je dois refaire une nouvelle fonction pour dire tout les latest ont aura une class unactive

              ou juste rajouter a côté active, unactive

              quand on clique on aura une class active
              et pour ceux qu'on a pas cliquer on aura une class unactive

              et ensuite ca sera bon

              merci et apres je mettrai résolu
            3. Modérateur
              @korka1 - Tu me parles de la class "unactive" .. hors... dans le code que je t'ai donné je n'y fait nul part référence...

              2 - je t'ai demandé d'ouvrir une nouvelle discussion pour toute nouvelle question.

              3 - Je ne comprend pas ta question... il faudra que tu la reformules (dans une nouvelle discussion donc) plus clairement.
              - En montrant le code concerné
              - En expliquant en détail ce que le code fait
              - En expliquant en détail ce que le code devrait faire selon toi.
            4. @jordane45ok je vais réfléchir un peut et voir et j'ouvrerais un nouveau mesage pour te dire ou ca coince en t'expliquant le mmieux possible

              car là je viens juste trouver une petite érreur sans importance

              mais là je vais come même esayer de refaire la page
              merci là je met en résolut et j'ouvrerai un autre topic ;)