2010-07-26 5 views
2

chaque fois que j'ai essayé d'utiliser l'état actif d'hyperlien/d'étiquette d'ancrage, cela ne fonctionne pas. même si je clique sur le lien, il devrait le montrer en état actif, mais il n'y a pas d'effet. Y a-t-il quelque chose qui me manque?état de l'hyperlien actif de l'étiquette d'hyperlien ne fonctionnant pas

c'est un exemple- base

html:

   <ul> 
       <li><a class="main" href="">Home</a></li> 
       <li><a href="">About</a></li> 
       <li><a href="">Contact</a></li> 
       <li><a>Search</a></li> 
       <li><a href="">RSS Feed</a></li> 

      </ul> 

     </div> 

css:

#navigation ul li a:hover, #navigation ul li a:focus, #navigation ul li a:active { 
       color: #FFF;   
       border: 1px solid #B20000; 
       border-top: 2px solid #B20000; 
       padding: 15px 6px 6px 6px; 
       background: #660000; 
       -moz-transition: color 1s ease; 
       -o-transition: color 1s ease; 
       -webkit-transition: color 1s ease; 
       transition: color 1s ease;  
       text-shadow: 0 0 0.2em #D5E3E7, 0 0 0.2em #D5E3E7; 

     } 

Répondre

2

Pour atteindre l'effet désiré, vous devez passer une variable sage site qui contient la valeur dont le lien est actif, et chargement de la page, récupérer la variable, comparer avec des liens de navigation et si elles correspondent, puis appliquez la classe active ou quelque chose.

Pour css: active est utilisée pour montrer le lien qui est poussé au moment exact, pas quel lien est actif sur le site. Peut facilement être réalisé avec des langages côté serveur (comme PHP), mais je ne sais pas si cela peut être réalisé avec des langages côté client (comme JavaScript), si oui, j'aimerais voir une réponse à propos de ça aussi.

3

Il n'y a pas d'effet parce que vous utilisez les mêmes styles CSS pour les deux états du liens:

a:hover 
a:active 

Vous devez définir différents styles CSS pour qu'ils puissent voir le changement de style. Par exemple:

#navigation ul li a{ 
    color:#0000ff; 
} 

#navigation ul li a:hover{ 
    color:#ff0000; 
} 
+0

J'ai essayé cela. ça n'a pas marché. J'espère que j'ai été clair dans ma question. quand je clique sur un lien actif dans un menu, il faut appliquer le style d'état actif. mais ce n'est pas le cas. cela ne changera que lorsque je survolerai. par exemple, si je clique sur le bouton «TAG» de stackoverflow.com, il me mène à cette page et il devient orange, tandis que le reste des liens est gris. sur ma page, cela n'arrive pas. – input

0

Ouais, vous avez besoin d'un style complètement différent pour votre vol stationnaire et états actifs pour voir les changements qui se produiront, essayez:

a:hover { color: blue; text-decoration: underline; } 
a:active { color: black; text-decoration: none; } 

Cela devrait vous permettre de voir ce qui se passe.