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
    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 ;)
  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. 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. 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. 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. 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. 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. 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');
              
          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. 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