Modifier l'image lorsque Active

Question

J'ai 3 liens qui représentent le contenu d'un iFrame dans ma page. Lorsque vous cliquez sur chaque lien, il recharge le contenu de cet iFrame sans recharger la page.

comment puis-je définir l'image de mon lien pour changer quand il est actif?

voici mon code:

 <div id="tabs"> 
      <div id="overview"> 
       <a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a> 
      </div> 
      <div id="gallery"> 
       <a target="tabsa" href="tawagpinoygallery.html">Gallery</a> 
      </div> 
      <div id="reviews"> 
       <a target="tabsa" href="trframe.html">Reviews</a> 
      </div> 
     </div> 
     <div id="tabs-1"> 
      <!--<div id="scroller">--> 
      <iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe> 
     </div> 

code CSS:

#gallery a { 
text-indent: -9999px; 
padding-top: 40px; 
background: url(../images/GalleryTab.png) no-repeat; 
height: 51px; width: 123px; position: absolute; z-index: 2; 
} 

#gallery a:active, a:hover { 
text-indent: -9999px; 
padding-top: 40px; 
background: url(../images/galleryoverview.png) no-repeat; 
height: 51px; 
width: 123px; 
position: absolute; 
z-index: 2; 
} 

il ne semble pas fonctionner ..: Oi ne voir le changement d'image quand je tiens la souris sur le lien, mais quand je clique dessus, l'image reste la même que si elle n'était pas l'onglet actif. :Oh merci!!

Answer 1

Je crois que le sélecteur est:

#gallery a:focus {...}

C'est (forcément) mais appliqué variablement à travers les navigateurs,. Stu Nicholls a une démo sur CSS Play, cette démo ayant pour but de supprimer le contour par défaut de l'élément focalisé, et sinon de styler l'élément cliqué.

On peut supposer que cela serait plus fiable avec jQuery, mais cela peut être fait avec CSS.

Answer 2

Je ne vois pas de style pour les visites? Seulement actif et planant.

ajouter

#gallery a:visited{} 

style et voir si cela aide.

Mais je me demande si c'est ce que vous demandez réellement? Vous pouvez vouloir lier pour être affiché différemment des autres liens si c'est le dernier lien sur lequel l'utilisateur a cliqué. Pour ce faire, vous devrez peut-être utiliser du javascript.

Par exemple, si vous utilisez jQuery vous pouvez faire quelque chose comme ceci:

$("#gallery a").click(function(){ 
    $("#gallery a").removeClass("ActiveClass"); 
    $(this).addClass("ActiveClass"); 
}); 

où ActiveClass est une classe CSS pour le style le lien approprié.

---

EDIT base sur le commentaire ci-dessous. Supposons que vous ayez trois liens identiques (appelez ça lookA). Vous cliquez sur un et il a l'air différent des deux autres (lookB) mais les deux autres ont toujours la même apparence (lookA). Vous cliquez ensuite sur un deuxième lien. Le deuxième lien n'est pas lookB et les deux autres liens sont lookA. Est-ce que cela ressemble à ce que vous voulez? Au moins, c'est ainsi que j'interprète votre question.

Par conséquent, créer deux classes en CSS:

.lookA {/*Style for lookA*/} 
.lookB {/*Style for lookB*/} 

Bien sûr, vous pouvez utiliser des noms plus significatifs.

vous pouvez ajouter une classe à chacun des liens que vous devez utiliser dans ce scénario comme celui-ci:

<div id="tabs"> 
     <div id="overview"> 
      <a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a> 
     </div> 
     <div id="gallery"> 
      <a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a> 
     </div> 
     <div id="reviews"> 
      <a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a> 
     </div> 
    </div> 

Alors que chaque lien peut être refered par sa classe, qui est, ImageLink. De plus, chaque lien a un lookA par défaut.

Maintenant jQuery (je sais que vous ne spécifiez pas jQuery, mais l'utiliser est 100 fois plus simples que Javascript simple) .:

$(document).ready(function(){ 
    $(".imagelink").click(function(){ 
     $(".imagelink").removeClass("lookB"); 
     $(this).addClass("lookB"); 
     return true; 
    }); 

}); 

Donc, cliquez sur le lien, il supprime lookB de tout autre lien l'applique uniquement au lien cliqué.

Espérons que cela aide un peu.