Изменить изображение ссылки, когда активен - PullRequest
Новая
       4

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

2 голосов
/ 19 января 2010

У меня есть 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; 
}

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

Ответы [ 2 ]

1 голос
/ 19 января 2010

Я не вижу стиль для посещаемых?Только active и hover.

добавьте стиль 

 #gallery a:visited{}

и посмотрите, поможет ли это.

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

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

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

, где ActiveClass - это класс CSS для стилизации ссылки.

РЕДАКТИРОВАТЬ, основываясь на комментариях ниже.

Предположим, что у вас есть три ссылки, которые выглядят одинаково (назовите этот 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>

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

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

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

 });

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

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

0 голосов
/ 19 января 2010

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

#gallery a:focus {...}

Однако это (неизбежно) применяется по-разному в разных браузерах.

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

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

...