Surligner sur le Onclick

**thais781** · 25/07/2013, 17h12

Bonjour,

Vous trouverez ci-joint mes 2 petits fichiers d'exemples.

Quand le user clic SURVOLE Ligne 1 on passe bien en couleur verte
Par contre quand il clic dessus, la couleur ne reste pas verte mais reviens à son état initiale ....

Une idée ?

Code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="offre"><a href="" onclick="javascript:affiche1(); return false;" >Ligne 1</a></div>

Code 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
#offre {
  background: transparent none repeat scroll 0% 50%;
  list-style-image: none;
  text-align: left;
  font-size: 12px;
}
 
#offre a {
  background: #f4ebda none repeat scroll 0% 50%;
  font-size: 12px;
  margin-top: 10px;
  text-decoration: none;
  display: block;
  color: #000000;
  margin-left: 10px;
}
 
#offre a:hover {
  background: #056c32 none repeat scroll 0% 50%;
  color: #f4ebda;
}

Thais

**Torgar** · 25/07/2013, 17h24

Hé hop ! Un peu de lecture et tu trouveras ton bonheur !

**thais781** · 25/07/2013, 17h45

Bonjour,

Merci pour ton aide.
J'ai bien essayé avant de poster les codes suivants mais ca ne marchait pas
Une fois cliquer, la ligne ne conserve pas sa couleur ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#offre a:link { color: red }       /* lien non-visité */
#offre a:visited { color: blue }   /* lien visité */
#offre a:hover { color: yellow }   /* lien survolé */
#offre a:active { color: lime }    /* lien activé */

Ci-joint 3 petits fichiers pour tester si ca peut t'aider .....

Merci

Thais

**rodolphebrd** · 25/07/2013, 18h17

Ça fonctionne : http://codepen.io/anon/pen/DkKtd

**thais781** · 25/07/2013, 19h25

Le hover marche bien.
Mais mon soucis est que quand je clique sur mon lien, le texte cliqué ne conserve une couleur autre que celle avant le clic.

Par exemple :
Normal : Bleu
Hover : Jaune
Cliqué : Vert

Ton exemple n'integre pas le bout de Javascript, c'est peut être la ou est le pb ??

Thais

**rodolphebrd** · 25/07/2013, 22h24

Envoyé par thais781

Ton exemple n'integre pas le bout de Javascript, c'est peut être la ou est le pb ??

Non !
J'ai rajouté un lien en dur pour mieux cibler l'état visited du lien.
Pour les tests pensez à vider l'historique de votre navigateur.
http://codepen.io/anon/pen/CcoGK

**thais781** · 26/07/2013, 10h43

Bonjour,

Merci pour votre aide.
Je vais reformulé mon pb, je ne sais pas si j'ai été clair ....

Donc pour tester :
1. Telecharger les 3 fichiers
2. Lancer le fichier MonFichier.html
3. On a alors sur la partie gauche 4 liens ligne 1, 2, 3 et 4
4. Quand on survole (hover) les liens, la couleur du surlignement change
5. Quand on clic sur un des liens, le texte s'affiche dans la partie droite de la fenetre,

MAIS le surlignement du texte cliqué dans la partie gauche ne change pas.
Après le clic il est le même qu'avant.
L'objectif est de surligner (et de la garder surligné) le lien cliqué qui est affiché dans la partie droite
Etc si on clic sur un autre lien, il deviens coloré et le précédent reviens à sa situation d'origine...

Merci pour votre aide et à votre dispo pour plus de précision ...

Thais

**Bovino** · 26/07/2013, 13h49

CSS ne gère pas ce genre de chose, ou alors avec des feintes par exemple à base de bouton radion caché. Le plus simple est de passer par du JavaScript.

**thais781** · 26/07/2013, 14h12

Bonjour Bovino,

Merci pour ta réponse et ton aide.
Euh ..... pas de soucis pour passer par du Javascrip ..... mais on fait comment

Tu as une piste de recherche à me donner ?

Thais

**rodolphebrd** · 26/07/2013, 14h43

J'ai rajouté un morceau de code JavaScript (j'ai remodelé votre code) comme suggéré par bovino :
A partir de cette page vous en créez une autre au moins (page2.html, etc) puis vous pouvez tester :

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
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
90
91
92
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
#nav {
        background: transparent none repeat scroll 0% 50%;
        text-align: left;
}
#nav ul {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
}
#nav a {
        background: #f4ebda none repeat scroll 0% 50%;
        font-size: 4em;
        margin-top: 10px;
        text-decoration: none;
        display: block;
        color: #000000;
        margin-left: 10px;
}
#nav a:hover {
        background: #056c32 none repeat scroll 0% 50%;
        color: #f4ebda;
}
#nav li.current {
        background-color: red;
}    /* lien activé */
</style>
<script>
function extractPageName(hrefString)
{
        var arr = hrefString.split('/');
        return  (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();               
}
 
function setActiveMenu(arr, crtPage)
{
        for (var i=0; i<arr.length; i++)
        {
                if(extractPageName(arr[i].href) == crtPage)
                {
                        if (arr[i].parentNode.tagName != "DIV")
                        {
                                arr[i].className = "current";
                                arr[i].parentNode.className = "current";
                        }
                }
        }
}
 
function setPage()
{
        hrefString = document.location.href ? document.location.href : document.location;
 
        if (document.getElementById("nav")!=null)
                setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}
</script>
<script language="javascript">setPage()</script>
</head>
 
<body>
<div id="main">
  <div id="contenu">
    <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="vertical-align: top; width: 40%;"><br>
            <div id="nav">
              <ul>
                <li><a href="index.html">Lien 1</a></li>
                <li><a href="page2.html">Lien 2</a></li>
                <li><a href="page3.html">Lien 3</a></li>
                <li><a href="page4.html">Lien 4</a></li>
              </ul>
            </div>
 
            </td>
          <td style="vertical-align: top; width: 60%;" id="tableau"><br>
            <div id="box"> </div></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
  <script language="javascript">setPage()</script>
</body>
</html>

**thais781** · 27/07/2013, 09h30

Bonjour,

C'est une bonne idée, mais ca m'oblige a changer la structure de mon site ...

Comme je veux juste indiqué à l'utilisateur qu'il a cliqué sur cette ligne j'ai fais un autre post dans la rubrique JS pour savoir si on pouvais faire un Find/Replace avec du JS.

L'idée (mais je ne sais pas si elle est jouable) est de rechercher par exemple "ligne 2" dans la partie gauche puis la remplacer par le meme texte mais en gras ....

Thais

Invité · 27/07/2013, 18h24

Bonjour,
il faut de toute façon revoir la STRUCTURE du code.

1/ Remplacer :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="box">
	  <div id="offre"><a href="" onclick="javascript:affiche1(); return false;" >Ligne 1</a></div>
	  <div id="offre"><a href="" onclick="javascript:affiche2(); return false;" >Ligne 2</a></div>
	  <div id="offre"><a href="" onclick="javascript:affiche3(); return false;" >Ligne 3</a></div>
	  <div id="offre"><a href="" onclick="javascript:affiche4(); return false;" >Ligne 4</a></div>
</div>

par (sémantiquement plus correct) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul id="box">
  <li id="offre_1" class="offre"><a href="" onclick="affiche_offre(1);" >Ligne 1</a></li>
  <li id="offre_2" class="offre"><a href="" onclick="affiche_offre(2);" >Ligne 2</a></li>
  <li id="offre_3" class="offre"><a href="" onclick="affiche_offre(3);" >Ligne 3</a></li>
  <li id="offre_4" class="offre"><a href="" onclick="affiche_offre(4);" >Ligne 4</a></li>
</ul>

N.B.
- En CSS, un ID doit être UNIQUE. Une CLASS peut être multiple.
- une seule fonction JavaScript suffit ici, avec un paramètre : affiche_offre(n); (il suffit aussi de mettre return false; dedans)

2/ Pour garder la couleur du bouton une fois cliqué, une petite fonction JavaScript suffit aussi :
-> on ajoute une class "offre_current" au <li> concerné !
N.B. : on peut intégrer ce bout de code à la fonction affiche_offre(n) !

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function affiche_offre(n)
{
	// Affichage du Tableau
	document.getElementById('tableau').innerHTML = "Ligne " + n;
	// Modification des Class :
	var i;
	for (i=1; i<5; i++){
		if(i==n){ // on ajoute la class offre_current
			document.getElementById('offre_' + i).className = "offre offre_current";
		} else {
			document.getElementById('offre_' + i).className = "offre";
		}
	}
	return false;
}

Enfin en CSS :
Remplacer #offre par .offre, et ajouter :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.offre_current { font-weight:bold; color:red; }

**thais781** · 27/07/2013, 22h50

Bonjour,

Mes recherches de la journées m'ont menée au même chemin ....
Ok pour le 1 .... voir même le 2

J'ai juste modifié un peu mon code JS pour y intégrer :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function displayResult(id)
{
	document.getElementById("box").outerHTML =document.getElementById("box").outerHTML.replace(style="color: rgb(244, 235, 218); background: none repeat scroll 0% 50% rgb(108, 51, 6);","");
 
	document.getElementById(id).style.color="#f4ebda";
	document.getElementById(id).style.background ='#6c3306 none repeat scroll 0% 50%';
}

Et ca marche impec .... sauf que (parcequ'il faut toujours un mais) pas sur toute les plateform.
C'est la première ligne de ma fonction qui merde.
Puisque quand je clic sur une autre ligne, il faut que le format du texte de la précédente revienne à son état originale ....

Je vais creuser plus ton code, le fait de parser toute les lignes pour en modifier la couleur doit mieux marche que d'essayer de supprimer le style ....
Le soucis est qu'il faut que tous les id des lignes se suivent.
Si j'aie :
Offre_1
Offre_40012
Offre_3
Offre_9273426728427

Ca se corse ....

Thais

**thais781** · 28/07/2013, 16h35

Et voila la fin du code, a rajouter dans le debut de la fonction à la place de la première ligne un peu crade ....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var RemoveAttribute = document.getElementById("box").getElementsByTagName("a");
for(var i=0; i< RemoveAttribute .length; i++) {RemoveAttribute [i].removeAttribute("style");}

Y a plus qu'a tester tout ca en detail ....

Thais

Invité · 31/07/2013, 15h35

Puisqu'on cherche une modification du "lien" sur le "clic", c'est qu'à priori, on va afficher un bout de page via AJAX (sinon, le clic sur <a href="...">...</a> actualise la page !)
On va donc se passer du <a href="...">...</a> :

En Javascript "pur" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul id="box">
  <li id="offre_1" class="offre" onclick="affiche_offre(1);" >Ligne 1</li>
  <li id="offre_2" class="offre" onclick="affiche_offre(2);" >Ligne 2</li>
  <li id="offre_3" class="offre" onclick="affiche_offre(3);" >Ligne 3</li>
  <li id="offre_4" class="offre" onclick="affiche_offre(4);" >Ligne 4</li>
</ul>
 
<div id="affichage_texte"></div>

Code javascript :

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
function affiche_offre(n)
{
	// MENU : modification des Class :
	var i;
	for (i=1; i<5; i++){
		if(i==n){ // on ajoute la class offre_current
			document.getElementById('offre_' + i).className = "offre offre_current";
		} else {
			document.getElementById('offre_' + i).className = "offre";
		}
	}
	// ICI, d'autres traitements, comme par exemple l'affichage d'un CONTENU via AJAX
	// affiche_contenu_ajax(n);
	// [...]
	// OU juste du texte dans un <div>
	document.getElementById('affichage_texte').innerHTML = "Ligne " + n + " cochée.";
}

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.offre { cursor:pointer; }
.offre_current { font-weight:bold; color:red; }

N.B. Cela dit, on peut "vouloir" garder le lien, mais le rendre INACTIF via JavaScript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:return false;">no lien (false)</a>

OU

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:void(0);">no lien (void)</a>

**rodolphebrd** · 31/07/2013, 15h40

Invité · 31/07/2013, 15h43

L'inconvénient en Javascript "pur", c'est qu'il faut donner des id à chaque <li>.
Si ces id ne se suivent pas (1 à 5 ici : OK), ça se complique... (ça peut être le cas avec une liste d'articles, dont chaque id serait celui enregistré en BdD)

En jQuery, l'écriture est simplifiée :
On peut directement travailler sur la class "offre".
Et ajouter/supprimer la class "offre_current" grâce à .removeClass()/.addClass()

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul id="box">
  <li class="offre" data="11" >Ligne 1</li>
  <li class="offre" data="22" >Ligne 2</li>
  <li class="offre" data="33" >Ligne 3</li>
  <li class="offre" data="44" >Ligne 4</li>
</ul>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	<!-- Scripts : initialisation jquery -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript"> 
$(document).ready(function() {
	$('.offre').on('click', function() {
		$('.offre').removeClass('offre_current');
		$(this).addClass('offre_current');
		// ICI, d'autres traitements, comme par exemple l'affichage d'un CONTENU via AJAX
		// affiche_contenu_ajax(n);
		// [...]
		// OU juste du texte dans un <div>
		$('#affichage_texte').html("Ligne " + $(this).attr('data') + " cochée.");
	});
});
</script>

[EDIT] Cool ! Je viens de passer les 8000 points !

Points : 8 003

"Merci, je ne m'y attendais pas... je suis ému...
Je remercie ma famille, tous ceux qui ont cru en moi, mes chiennes Candy et Havana,... "