Discussion :

[Eric555]

Bonjour,

J'ai un menu horizontal avec css comme suit :

code html:

Code html :

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

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 css :

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

[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) ?

[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

[Torgar]

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.

[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 javascript :

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

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

[lemirandais]

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 html :

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

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