Изменить изображение ссылки при активном

Question

У меня есть 3 ссылки, которые представляют содержимое для одного iFrame на моей странице. Когда вы нажимаете на каждую ссылку, она перезагружает содержимое этого iFrame без перезагрузки страницы.

Как установить изображение моей ссылки для изменения, когда оно активно?

вот мой код:

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

код 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; 
} 

это не похоже на работу ..: О.И. видеть только изменение изображения, когда я держать мышь вниз на link, но когда я нажимаю на него, изображение остается таким же, как если бы это была не активная вкладка. : o спасибо!

Answer 1

Я считаю, что селектор:

#gallery a:focus {...}

Это (неизбежно) применяется переменно во всех браузерах, однако.

У Stu Nicholls есть демо на CSS Play, эта демонстрация заключается в том, чтобы удалить контур по умолчанию сфокусированного элемента и в противном случае создать элемент с щелчком.

Предположительно это будет более надежно выполнено с помощью jQuery, но это можно сделать с помощью CSS.

Answer 2

Я не вижу стиль для посещения? Только активные и зависающие.

добавить

#gallery a:visited{} 

стиль и посмотреть, если это помогает.

Но мне интересно, действительно ли это то, о чем вы на самом деле спрашиваете? Вы можете захотеть, чтобы ссылка отображалась иначе, чем другие ссылки, если ее последняя ссылка, которую пользователь нажал. Для этого вам может понадобиться использовать javascript.

Например, если вы используете JQuery вы можете сделать что-то вроде этого:

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

где ActiveClass является класс CSS для стилизации ссылки надлежащим образом.

---

EDIT, основанный на комментарии ниже.

Предположим, что у вас есть три ссылки, которые выглядят одинаково (назовите этот lookA). Вы нажимаете на один, и он выглядит иначе, чем два других (lookB), но остальные два остаются одинаковыми (lookA). Затем вы нажимаете на вторую ссылку. Вторая ссылка - не lookB, а две другие - lookA. Это похоже на то, что вы хотите? По крайней мере, так я интерпретирую ваш вопрос.

Таким образом, создать два класса в CSS:

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

, конечно, вы можете использовать более осмысленные имена.

Затем вы можете добавить класс к каждому из ссылок, которые вы должны использовать в этом случае, как это:

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

Так что каждое звено может было ссылаться на его классом, то есть ImageLink. Также каждая ссылка имеет внешний вид по умолчанию.

Теперь в JQuery (я знаю, что вы не указали JQuery, но использовать его в 100 раз проще, чем обычный Javascript) .:

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

}); 

Так по щелчку на ссылке, он удаляет lookB от любой другой линии связи и применяется только к нажатой ссылке.

Надеюсь, это поможет.