Changer la propriété CSS lors d'un clic

Version imprimable

Bonjour,

J'ai un menu horizontal avec css comme suit :

code html:

Code:

1
2
3
4
5
6
7
<div class="menu">
<ul>
   <li ><a  id="active" href="#">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Item plus long</a></li>
</ul>
</div>

code 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
.menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
 }
.menu li {
    margin-left:2px;
    float:left; /*pour IE*/
 }
.menu ul li a {
    display:block;
    float:left;   
    width:100px;
    background-color:#6495ED;
    color:black;
    text-decoration:none;
    text-align:center;
    padding:5px;
    border:2px solid;
    /*pour avoir un effet "outset" avec IE :*/
    border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
.menu ul li a:hover {
    background-color:#D3D3D3;
    border-color:#696969 #DCDCDC #DCDCDC #696969;
 } 
 .menu ul li a#active{
    background-color:#D3D3D3;
    border-color:#696969 #DCDCDC #DCDCDC #696969;
 }

Comme vous voyez, le premier menu est actif. Je veux que lorsque je clique sur un autre menu, l'id "active" sera enlevé du premier menu et se transfère vers le deuxième. Comment je peux le faire ?

24/04/2013, 16h58
Torgar

Salut,

1. Les liens redirigent chacun vers une page de ton site ?

2. Ton menu est inclus comment dans la page (un include PHP, en statique sur chaque page) ?
24/04/2013, 17h13
lemirandais

Par logique, quand tu cliques sur un lien, c'est pour rediriger vers une autre page.
Après si tu veux indiquer sur quelle page le visiteur est, c'est à toi à le dire en html. En gros, indiquer et changer en fonction des pages, la page en cours.

lemirandais
24/04/2013, 17h20
Torgar

Citation:

Envoyé par lemirandais

Par logique, quand tu cliques sur un lien, c'est pour rediriger vers une autre page.

Pas forcément justement.

D'où ma question. Son HTML est peut-être simplifié. Les liens pourraient très bien ouvrir une popup ou déclencher une action par de l'AJAX.

Pour le reste je plussoie et donc lui demande sa méthode d'intégration du menu pour l'aiguiller vers la bonne méthode.
24/04/2013, 17h45
Eric555
Oui les liens redirigent chacun vers une page de mon site. Le menu est statique dans la page maitre de mon site.
J'ai utilisé une fonction javascript mais pas de résultat.
Code:

1 2 3 4 5 6 7 <script> $('li a').click(function(e) { e.preventDefault(); $('a').removeClass('active'); $(this).addClass('active'); }); </script>

Logique car tu demandes de supprimer les class "active" alors que tu as des id.
Essaie avec ce code source html, ton code marchera:
Code:

1 2 3 4 5 6 7 8 <div class="menu"> <ul> <li><a class="active" href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item plus long</a></li> </ul> </div>
lemirandais

Essayez avec ça:
code html:

Code:

1
2
3
4
5
6
7
<div class="menu">
<ul>
<li class="active"><a  href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item plus long</a></li>
</ul>
</div>

code 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
.menu ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
.menu li {
 margin-left:2px;
 float:left; /*pour IE*/
 
 }
 .menu ul li a {
 display:block;
 float:left;   
 width:100px;
 background-color:#6495ED;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:5px;
 border:2px solid;
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
.menu ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 } 
 .menu .active a { 
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
		}

code javascript:

Code:

1
2
3
4
5
6
7
$(function() {
	$("li").click(function(e) {
	    e.preventDefault();
	    $("li").removeClass("active");
	    $(this).addClass("active");
	});
});

24/04/2013, 19h32
Eric555

Merci wnejla :ccool: , j'ai tout simplement copié collé :mrgreen: