Autre méthode en Javascript "pur"
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:
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:
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:
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:
<a href="javascript:return false;">no lien (false)</a>
OU
Code:
<a href="javascript:void(0);">no lien (void)</a>
