Изменить цвет якоря при нажатии - PullRequest
6 голосов
/ 22 января 2010

я хочу, чтобы при нажатии на эту ссылку ее цвет менялся на данный цвет

<li id="press"><a href="<?=base_url()?>index.php/page/press">Press</a></li>

Ответы [ 4 ]

4 голосов
/ 22 января 2010

Объявление CSS :active выполнит то, что вам нужно. http://www.w3schools.com/CSS/pr_pseudo_active.asp

Пример.

a:active {
    color: #C00;
}

NB.

a:active ДОЛЖЕН идти после a:hover в определении CSS, чтобы быть эффективным!

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

Все ссылки? a:focus { color: orange; }

Некоторые ссылки? Дайте им класс, например, <a class="foo" ...>: a.foo:focus { color: purple; }

Одна ссылка? Дайте ему идентификатор, например, <a id="bar" ...>: a#bar:focus { color: #BADA55; }

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

Вот пример Css для посещенной гиперссылки

a:link {color:#FF0000}    
a:visited{color:Red}

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

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

Вы можете сделать это на стороне сервера с помощью PHP или JS.

В PHP все, что вам нужно, - это добавить данное имя класса к ссылке после нажатия. очень простой пример:

<a href="myURL" class="<?php if(ExpressionToDetermineIfLinkIsClicked) echo 'selected'; ?>">

и CSS:

.selected { color: #FF0000; }

Если вы хотите сделать это с JS и используете любую платформу JS Framework, просто найдите на сайте фреймворков «Как добавить событие» и «Как добавить имя класса», а затем объедините то, что вы узнали из результаты поиска.

Если вы, по совпадению, используете prototype.js framework, тогда вы можете попробовать следующее:

function selectLink(link){
  link.addClassName('selected');

  var otherLinks = link.siblings();

  for(var i = 0; i < otherLinks.lenght; i++){
     otherLinks[i].removeClassName('selected');     
  }

}

document.observe('dom:loaded', function(){
    $('menu').observe('click', function(event){
       event.stop();
       var link = Event.element(event); 
       selectLink(link);
       });
    });

---
<div id="menu">
<a href="url1" id="link1" class="">
<a href="url2" id="link2" class="">
<a href="url3" id="link3" class="">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...