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

Mise en page CSS Discussion :

Menu à onglets : Conserver l'onglet actif même après la perte du focus


Sujet :

CSS

  1. #1
    Membre éclairé Avatar de tigunn
    Homme Profil pro
    Développeur de bug
    Inscrit en
    Janvier 2003
    Messages
    608
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur de bug

    Informations forums :
    Inscription : Janvier 2003
    Messages : 608
    Par défaut Menu à onglets : Conserver l'onglet actif même après la perte du focus
    Bonjour,
    J'ai un classeur à onglet affiché sur une page php (voir image 1). Chaque onglet affiche une div différente; mais je voudrais que lorsque je clique ailleurs sur la page: l'onglet actif demeure visible (ce qui n'est pas le cas malheureusement, voir image 2).
    Voici le css:
    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
    #navigation {
    	position: relative;
    	top: 0px;
        margin: 0 ; 
        padding: 0 ; 
        list-style: none ; 
        z-index: 2;
        }
    #navigation li { 
    	position: relative;
        display: inline ;
        margin: 0px;
        margin-right: 1px ; /*	délimite mieux les onglets	*/
        color: #fff ; 
        background: #E5E5E5 ; 
        }
    #navigation li a { 
    	position: relative;
    	top: 0px; 
        padding: 0px 20px ; 
        background: #E8D5B4 ; 
        color: #000 ; 
        border: 1px solid #b89355 ; 
        font: 1em "Trebuchet MS",Arial,sans-serif ; 
        /*line-height: 1em ; => si la ligne est décommentée, alors les onglets sont moins haut: effet de superposition du bloc_fragment sur les onglets */
        text-align: center ; 
        text-decoration: none ; 
        border-radius: 5px 5px 0 0;
        }
    #navigation li a:hover, #navigation li a:active { 
    	top: 0px;
    	color: #fff ; 
        background: #900 ; 
        text-decoration: underline ; 
        }
    #navigation li a:focus { 
    	color: #000; 
        background: #FBF7EF; 
        text-decoration: underline ; 
        border-bottom: none;
        top: 1px;
        }
    LE html:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    	echo '<div class="notice_metadata">
    		<h4>' . gettext('Fragment') . '</h4>';
    	echo '<div id="aff_1_fragment">';
    	echo $menu_proc->transformToXml($menu_xml);
    	echo '<div id="bloc_fragment_normalise">....</div>
    		<div id="bloc_fragment_diplomatique">$proc->transformToXml($xml)</div>
    		<div id="bloc_fragment_imagette">...</div>
    		</div>
    	</div>';
    et le xsl:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?xml version="1.0"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    	<xsl:template match="/">
    		<ul id="navigation">
    			<xsl:for-each select="menu/item">
    				<xsl:variable name="URL" select="adresse" />
    				<xsl:variable name="TITLE" select="note" />
    				<xsl:variable name="ID" select="id" />
    				<li onclick="changeOngletActifAffichageFragment('{$ID}')"><a id="a_{$ID}" href="{$URL}" title="{$TITLE}"><xsl:value-of select="titre"/></a></li>
    			</xsl:for-each>
    		</ul>
    	</xsl:template>
    </xsl:stylesheet>
    Merci de votre aide!
    Images attachées Images attachées   

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonsoir,
    au vue de ce que tu fourni, il semble préférable dans ton cas de passer par l'événement onclick sur les onglets, ce qui accessoirement est plus ergonomique, qui affiche la DIV correspondante.
    Une page en ligne, ou le code HTML généré, serait la bien venue...

  3. #3
    Membre éclairé Avatar de tigunn
    Homme Profil pro
    Développeur de bug
    Inscrit en
    Janvier 2003
    Messages
    608
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur de bug

    Informations forums :
    Inscription : Janvier 2003
    Messages : 608
    Par défaut
    le code généré:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div id="aff_1_fragment"><?xml version="1.0"?>
    <ul id="navigation"><li onclick="changeOngletActifAffichageFragment('bloc_fragment_diplomatique')"><a id="a_bloc_fragment_diplomatique" href="#">Version diplomatique</a></li><li onclick="changeOngletActifAffichageFragment('bloc_fragment_normalise')"><a id="a_bloc_fragment_normalise" href="#">Version normalisée</a></li></ul>
    <div id="bloc_fragment_normalise"><?xml version="1.0" encoding="UTF-8"?>
    <p xmlns="http://www.w3.org/1999/xhtml">Bla bla 1</p>
    </div>
    		<div id="bloc_fragment_diplomatique"><?xml version="1.0" encoding="UTF-8"?>
    <p xmlns="http://www.w3.org/1999/xhtml">Bla bla 2</p>
    </div>
    		</div>
    et un peu plus de css:
    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
    div#aff_1_fragment {
        border : none;
        background-color : #E5E5E5;
        padding : 5px;
        margin : 5px 2% 5px 2%;
        border-radius : 3px;
    }
     
    div#bloc_fragment_normalise {
    	position: relative;
        border : 1px solid #b89355;
        background-color : #FBF7EF;
        font-size : 12px;
        padding : 5px;
        z-index: 1;
        display: block;
    }
     
    div#bloc_fragment_diplomatique {
    	position: relative;
        border : 1px solid #b89355;
        background-color : #FBF7EF;
        font-size : 12px;
        padding : 5px;
        z-index: 1;
        display: none;
    }
    Merci du coup de main

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    le CSS seul ne pourra pas le faire, il te faut javascripter la gestion, ou encore recharger, via Ajax par exemple, la DIV, mais cette deuxième solution me semble bien lourde.

    exemple
    Code html : 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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>[...]</title>
    <meta name="Author" content="NoSmoking">
    <style type="text/css">
    div#aff_1_fragment {
      border : 1px solid #888;
      background-color : #E5E5E5;
      padding : 5px;
      margin : 5px 2% 5px 2%;
      border-radius : 3px;
    }
    div#bloc_1 {
      display: block;
    }
    div#bloc_2 {
      display: none;
    }
    .info {
      border : 1px solid #b89355;
      background-color : #FBF7EF;
      font-size : 12px;
      height : 100px;
      padding : 5px;
    }
    </style>
    <script type="text/javascript">
    // la fonction qui gere l'affichage
    function showDiv(num){
      var i = 1, oDiv;
      while(( oDiv = document.getElementById('bloc_' +i))){
        oDiv.style.display = num == i ? 'block' : 'none';
        i++;
      }
    }
    </script>
    </head>
    <body>
    <div id="aff_1_fragment">
      <ul id="navigation">
        <li onclick="showDiv(1);"><a id="a_bloc_1" href="#">Version diplomatique</a></li>
        <li onclick="showDiv(2);"><a id="a_bloc_2" href="#">Version normalisée</a></li>
      </ul>
      <div id="bloc_1" class="info">
        <p>
          <b>Version diplomatique</b><br>
          Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.
        </p>
      </div>
      <div id="bloc_2" class="info">
        <p>
          <b>Version normalisée</b><br>
          Coalito dignitates ordinarias coalito Rufinus annonae ad in est et praefectus Rufinus convectio enim tempestate.
        </p>
      </div>
    </div>
    </body>
    </html>
    - tu peux remplacer l'événement onclick par onmouseover

    -les divs à afficher doivent avoir le même radical pour l'ID, ici "block_" et un numéro chrono continu

  5. #5
    Membre éclairé Avatar de tigunn
    Homme Profil pro
    Développeur de bug
    Inscrit en
    Janvier 2003
    Messages
    608
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur de bug

    Informations forums :
    Inscription : Janvier 2003
    Messages : 608
    Par défaut
    Merci NoSmoking.
    Je pense que j'étais mal parti; alors j'ai tout repris et changé de modèle.
    J'ai utilisé le tuto de Dave Lizotte sur dev.com ) partir de la page Cours et tutoriels pour apprendre CSS : https://css.developpez.com/cours/ , très bien détaillé.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Treeview: Garder le noeud sélectionné même après la perte de focus
    Par melouille56 dans le forum Macros et VBA Excel
    Réponses: 7
    Dernier message: 25/01/2022, 15h57
  2. Réponses: 2
    Dernier message: 15/11/2014, 13h03
  3. onglet (data ou chart) actif
    Par onejock dans le forum Macros et VBA Excel
    Réponses: 8
    Dernier message: 03/07/2008, 10h04
  4. Copier le nom d'un onglet vers une cellule du même onglet
    Par etorria dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 15/04/2008, 10h15
  5. Menu Option des Dossiers, Onglets disparus
    Par Hamza dans le forum Windows XP
    Réponses: 8
    Dernier message: 21/11/2007, 16h07

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