2

Gente, eu custumo fazer um codigo php dentro do meu class="" para mostrar em negrito por exemplo um menu especifico que está ativo.

<div class="menu-up">
    <ul>
        <a href="index.php?url=menu"><li class="li-up fr <?php if ($_GET["url"]=="menu") { echo "active"; } ?>">MENU</li></a>
        <a href="index.php"><li class="li-up fr <?php if (!$_GET["url"]) { echo "active"; } ?>">HOME</li></a>
    </ul>
</div>

Mas agora eu fiquei sabendo de um :active, igual ao :hover e tal na classe, que quando ativo ele faz ficar diferente, mas eu nao consegui fazer funcionar esse :active, segue os link falando dele: http://www.w3schools.com/cssref/sel_active.asp

Segue meu html com o codigo html e php fazendo a gambiarra do active abaixo: http://pastebin.com/7kLTYKAZ

Alguem poderia me ajudar a fazer ele funcionar da mesma forma que eu fiz o código acima sem usar ele?

2
  • O active não é uma classe, e acho que não faz o que quer aqui. Dê uma olhada aqui e clique com o mouse no texto: jsfiddle.net/X2537
    – Sergio
    Commented 6/08/2014 às 7:15
  • @Cachuera, :hover é um efeito quando o mouse passa em cima de um link, :active é o destaque dado a um elemento quando clicado. Ambas são propriedades de um elemento Commented 6/08/2014 às 7:27

1 Resposta 1

5

O problema aqui é um engano conceitual.

A pseudoclasse (é assim mesmo que se chama) :active é utilizada para identificar um dos quatro estados de um link, ou seja, se ele corresponde ao momento em que você clica no link. As outras pseudoclasses são: :link, :visited e :hover.

O que o seu código faz é inserir uma classe na tag li, que é basicamente um identificador, tal como uma id, só que pode aparecer em vários elementos do mesmo HTML.

A principal diferença entre as duas coisas, é que as pseudoclasses dos links são como propriedades de estado dos links, ou seja, todo link terá isso sem você precisar fazer nada, e elas poderão ser acessadas pelo CSS para efeito de estilização.

Das quatro, apenas :hover e :active poderão mudar durante a exibição de uma página, daí agruparmos os estilos de links em dois grupos:

a:link, a:visited

a:hover, a:active

A outra grande diferença entre as classes e pseudoclasses é a forma de utilização no CSS. As classes (de fato) são simbolizadas com um ponto (.), enquanto as pseudoclasses recebem dois pontos (:). Por exemplo:

a.exemplo:link, a.exemplo:visited { /* estilos */ }
a.exemplo:hover, a.exemplo:active { /* estilos */ }

Aqui a tag a ("anchor", ou link) é identificada pela classe .exemplo, e pelos seus respectivos estados (:link e :visited, :hover e :active)

Para experimentar, eu sugiro o seguinte exemplo:

<!DOCTYPE html>
<html>
  <head>
  <style>
    a:link    {color:#009;}
    a:visited {color:#090;}
    a:hover   {color:#900;}
    a:active  {color:#9f0;}
  </style>
  </head>
  <body>

    <p>Passe o mouse e clique aqui: <a href="">link de testes</a></p>

  </body>
</html>

Finalmente, sobre seu código, ele deverá funcionar, mas apenas para definir dinamicamente uma classe para a tag li, mas ela somente será utilizada pelo estilo CSS, sem qualquer outra implicação.

2
  • Cara, que burrice minha, eu pensei que ele fazia sabe o que, isso aqui: css-tricks.com/almanac/selectors/a/active Ta vendo o menu ali HTML, CSS, RESULT, quando clica em cima fica laranja com uma seta pra baixo, eu estava tentando fazer isso, quando clica em cima ele fixa, igual eu fiz funcionar no meu código, mas eu queria aquela setinha pra baixo em laranja. Vlw gente, entendi bem o active entao ele é só o omento exato que clica, ele nao continua o efeito. Falando nisso, alguem sabe fazer aquilo?
    – Obama
    Commented 8/08/2014 às 0:18
  • Tipo o menu aqui de cima da Stackfollow que tambem fica laranja, aquele eu sei fazer, mas e aquele efeito da setinha pra baixo como faz? É css aquilo né? Tem alguma propriedade especifica?
    – Obama
    Commented 8/08/2014 às 0:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .