Garder le lien comme actif quand je bouge la page, jusqu'à ce que je sélectionne un autre lien

Question

J'ai un problème avec les liens, j'ai créé un menu fait par des liens, qui en même temps, indique à l'utilisateur dans quelle section il est. Le menu fonctionne bien, mais quand je commence à faire des choses sur la section sous ce lien (pseudo-classe active, comme sélectionnée), le lien sélectionné devient un lien normal, donc l'utilisateur perd son orientation.

Je ne pense pas que le code soit nécessaire, mais juste au cas où quelqu'un en aurait besoin.

.menu 
{ 
    width:100%; 
    text-align:center; 



    } 
.menu a 
{ 
    height:30px; 
    width:170px; 
    background-image:url('../Images/item.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    color:Black; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 
    border:none; 
    padding:1px 0px 0px 0px; 
    margin-top:1px; 
    } 

.menu a:hover 
{ 
    background-image:url('../Images/itemHover.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 

    } 
.menu a:active 
{ 
    background-image:url('../Images/itemActive.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    color:White; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 
    text-decoration: none; 
    } 




      <div class="menu" > 
       <a href='vbscript:show(0)' id='focusme'>Section1</a> 
       <a href='vbscript:show(6)'> Section2 </a> 
       <a href='vbscript:show(2)'> Section3 </a> 
       <a href='vbscript:show(3)'> Section4 </a> 
       <a href='vbscript:show(4)'> Section5</a> 
       <a href='vbscript:show(5)'> Section6 </a> 
       <a href='vbscript:show(1)'> Section7</a> 
       <a href='vbscript:show(7)'> Section8 </a> 
       <a href='vbscript:show(8)'> Section9 </a> 
       <a href="javascript:calllast24()"> Section10</a> 
      </div> 

Quelqu'un peut-il me donner un indice sur ce sujet?

Answer 1

définissent une autre classe Juste active avec a:active et ajouter cette classe à la liaison en question dynamiquement (et enlever la même classe de tous les autres liens dans le menu).

JavaScript/jQuery est parfaitement applicable pour cela. Par exemple.

$('.menu a').click(function() { 
    $('.menu a').removeClass('active'); 
    $(this).addClass('active'); 
} 

Mise à jour: ou si ces liens sont en fait synchrone et vous utilisez réellement une vue côté serveur comme la technologie PHP/JSP/ASP, alors vous aurez besoin de saisir ses pouvoirs à la place. Voici un exemple JSP:

<ul id="menu"> 
    <li><a href="foo" ${page == 'foo' ? 'class="active"' : ''}">foo</a></li> 
    <li><a href="bar" ${page == 'bar' ? 'class="active"' : ''}">bar</a></li> 
    <li><a href="boo" ${page == 'boo' ? 'class="active"' : ''}">boo</a></li> 
</ul> 

L'exemple ci-dessus ne fait qu'ajouter class="active" lorsque la page actuelle correspond href du lien. Vous pouvez faire similaire en PHP (cet opérateur ternaire). Je ne suis pas sûr de l'ASP.

Answer 2

Ajoutez un nom de classe de quelque chose comme "courant" au lien actuellement sélectionné en utilisant JavaScript quand il est cliqué.

Vous pouvez recycler la classe "hover" ou en créer une unique.

.menu a:active, .menu a.current 
{ 
    background-image:url('../Images/itemActive.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    color:White; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 
    text-decoration: none; 
    }