Menu à onglets : Conserver l'onglet actif même après la perte du focus [Résolu]

[tigunn]

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 :

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 :

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 :

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!

[NoSmoking]

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...

[tigunn]

le code généré:

Code :

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 :

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

[NoSmoking]

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 :

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

[tigunn]

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, très bien détaillé.