IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

mon code javascript ne marche pas pour 2 à 3 boites d'onglets?


Sujet :

JavaScript

  1. #1
    Membre régulier
    Inscrit en
    Novembre 2007
    Messages
    175
    Détails du profil
    Informations forums :
    Inscription : Novembre 2007
    Messages : 175
    Points : 82
    Points
    82
    Par défaut mon code javascript ne marche pas pour 2 à 3 boites d'onglets?
    Bonjour
    J'ai lu ce tuto
    http://pckult.developpez.com/tutorie...-onglets-web2/
    ça marche très bien pour une boite, mais quand je veux l'utilisé pour 2 à 3 boite sur la me^me page
    ce qui ce passe
    1- la première boite marche très bien
    2-les 2 autres bois en dessous de la première m'affiche le contenu de tout les onglets à la fois, mais si je clique sur un onglet tout revien normal
    voici le code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Boîte à onglet - Web 2.0</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
     
    <body>
     
    <script type="text/javascript">
    function ChangeOnglet(onglet, contenu) 
    {   
        document.getElementById('content_1').style.display = 'none';
        document.getElementById('content_2').style.display = 'none';
        document.getElementById('content_3').style.display = 'none';  
     
        document.getElementById(contenu).style.display = 'block';       
     
        document.getElementById('tab_1').className = '';
        document.getElementById('tab_2').className = '';
        document.getElementById('tab_3').className = '';     
     
        document.getElementById(onglet).className = 'active';       
    }            
    </script>
    <script src="functions.js" type="text/javascript"></script>   
    <ul class="tabs">
        <li><a href="javascript:ChangeOnglet('tab_1', 'content_1');" id="tab_1" class="active">tuto</a></li>
        <li><a href="javascript:ChangeOnglet('tab_2', 'content_2');" id="tab_2">cours</a></li>
        <li><a href="javascript:ChangeOnglet('tab_3', 'content_3');" id="tab_3">exo</a></li>
    </ul>
     
    		<div id="content_1" class="content">        
                            <p>voir après
                </p>
            </div>
     
     
    		 <div id="content_2" class="content">        
                            <p>
                  ...................
                </p>
            </div>
     
     
    		 <div id="content_3" class="content">        
                            <p>
                  ---------------------------
                </p>
            </div>
     
    <script type="text/javascript">
    function ChangeOnglet1(onglet1, contenu1) 
    {   
        document.getElementById('contentl_1').style.display = 'none';
        document.getElementById('contentl_2').style.display = 'none';
     
     
        document.getElementById(contenu1).style.display = 'block';       
     
        document.getElementById('tabl_1').className = '';
        document.getElementById('tabl_2').className = '';
     
     
        document.getElementById(onglet1).className = 'active';       
    }            
    </script>
    <script src="functions.js" type="text/javascript"></script>   
    <ul class="tabs">
        <li><a href="javascript:ChangeOnglet1('tabl_1', 'contentl_1');" id="tabl_1" class="active">A</a></li>
        <li><a href="javascript:ChangeOnglet1('tabl_2', 'contentl_2');" id="tabl_2">B </a></li>
     
    </ul>
     
    		 <div id="contentl_1" class="content">        
    			<p>
    			----------- -----------------aaaaaaaaaaaa-----
                </p>
     
            </div>
    				 <div id="contentl_2" class="content">        
    			<p>
    			----------- ------------bbbbbbbbbbbbbbbbbbbbbbbbb----------
                </p>
     
            </div>
    </body>
    </html>
    pour quoi? et merci

  2. #2
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2013
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2013
    Messages : 13
    Points : 9
    Points
    9
    Par défaut
    bonjours

    "je sais ça date de 2010 mais j'ai eu même genre de problème y a pas lgt donc si autre ont la même chose, j'ai trouvé une solution sur un autre forum."

    alors dans ton css tu fais
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .content
    {
        display:none;
    }


    et ici dans ton code (ligne 76) a la place de :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="contentl_1" class="content">

    tu mets
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="contentl_1" class="content" style="display:block";>

Discussions similaires

  1. [MySQL] Mon code update ne marche pas
    Par hémilie dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 18/02/2015, 12h58
  2. code javascript ne marche pas balise script
    Par unmaxdemily dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 20/03/2009, 01h46
  3. Petite aide pour mon code javascript
    Par bennji dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 27/12/2008, 20h42
  4. Code javascript ne marche pas avec Mozilla Firefox
    Par Contact2012 dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 10/10/2008, 12h06
  5. Mon Backoffice ne marche pas pour update et delete ?
    Par vascoII dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 18/07/2008, 00h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo