• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

LuPereira

[Resolvido] Como fazer este efeito?

14 mensagens neste tópico

Boas,

Eu coloquei aqui este tópico porque não sabia em que secção o postar.

Eu tenho uma duvida. Esta consiste em não saber qual o código que gera isto:

Tens um menu com links.

E Quando clicas num link, esse link muda de cor e fica dessa cor até mudarem de página/link.

Isto pode soar confuso por isso vou deixar um exemplo que é este site: http://lupereira.deviantart.com

No menu de cima tem uns links a dizer : Profile, Gallery,...

Eu gostava de fazer o efeito que acontece quando clicas no link..

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

basta teres uma class no css que é, por exemplo, .selected, que tem as definições que queres que a opção seleccionada tenha e, na página correspondente a cada opção do menu, escreves class="selected" na opção do menu correspondente a essa página...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ora... isso é só alterar o estilo em cada página. Do género, na página perfil.html tens

<a class="selectedTab" href="perfil.html">Perfil</a>
<a class="normalTab" href="galeria.html">Galeria</a>
<a class="normalTab" href="favoritos.html">Favoritos</a>

depois na página galeria.html alteras o link para a galeria para ser da classe selectedTab:

<a class="normalTab" href="perfil.html">Perfil</a>
<a class="selectedTab" href="galeria.html">Galeria</a>
<a class="normalTab" href="favoritos.html">Favoritos</a>

e por aí fora...

PS: O marinheiro adiantou-se, mas a ideia é a mesma :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Podes usar javascript LuPereira

tipo

javascript:

                    function clicado(x)
                    {
                      if( arguments[0] = 1)
                             {
                                document.getElementById("op1").className='opclicado'
                               /* depois consoante as opçoes poes aqui qe as outras voltariam ao normal */
                             }
                     ....
                           /* aqui o código para as outras opçoes */
                    }

CSS:

                      .op
                      {
                           background:url('branco.jpg');
                      }
                     .opclicado
                     {
                          background:url('amarelo.jpg');
                     }

html:

<html>
<head>
         <script type="text/javascript">
          o que fiz em cima de Jscript 
         </script>
         <style type="text/css">
          o que fiz em cima de CSS 
         </style>
</head>
              <ul>
              <li class="op" id="op1" onclick="clicado(1)">Op1</li>
              <li class="op" id="op2" onclick="clicado(2)">Op2</li>
              </ul>
</html>

espero que percebas  :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

JoaoQAlves: viste a página que ele indicou? É que a resposta não tem muito a ver...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

JoaoQAlves: viste a página que ele indicou? É que a resposta não tem muito a ver...

Tem tudo a ver TheDark , usei esse mesmo sistema no meu antigo site que tinha uma função parecida, seleccionava de cor diferente o link clicado :confused:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ambas as ideias servem por isso vou usar a que melhor satisfizer o que eu quero.

Obrigado.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não é o que está na página que ele mostrou. O que o teu código faz é quando se clica no elemento altera a cor de fundo, o que não é persistente entre páginas (que suponho que é o pretendido). Se a página usasse AJAX tudo bem, mas daquela forma não.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Podes usar javascript LuPereira

tipo

javascript:

                    function clicado(x)
                    {
                      if( arguments[0] = 1)
                             {
                                document.getElementById("op1").className='opclicado'
                               /* depois consoante as opçoes poes aqui qe as outras voltariam ao normal */
                             }
                     ....
                           /* aqui o código para as outras opçoes */
                    }

CSS:

                      .op
                      {
                           background:url('branco.jpg');
                      }
                     .opclicado
                     {
                          background:url('amarelo.jpg');
                     }

html:

<html>
<head>
          <script type="text/javascript">
          o que fiz em cima de Jscript 
          </script>
          <style type="text/css">
          o que fiz em cima de CSS 
          </style>
</head>
               <ul>
               <li class="op" id="op1" onclick="clicado(1)">Op1</li>
               <li class="op" id="op2" onclick="clicado(2)">Op2</li>
               </ul>
</html>

espero que percebas  :D

Não percebi muito bem mas tinha de modificar o javascript para algo deste género não é?

<script type="text/javascript">
function clicado(x)
                    {
                      if( arguments[0] = 1)
                             {
                                document.getElementById("op1").className='opclicado'
                                document.getElementById("op2").className='op'
                                document.getElementById("op3").className='op'
                                document.getElementById("op4").className='op'
                                document.getElementById("op5").className='op'
                               
                             }
                                           if( arguments[0] = 1)
                             {
                                document.getElementById("op1").className='op'
                                document.getElementById("op2").className='opclicado'
                                document.getElementById("op3").className='op'
                                document.getElementById("op4").className='op'
                                document.getElementById("op5").className='op'
                               
                             }
						                    if( arguments[0] = 1)
                             {
                                document.getElementById("op1").className='op'
                                document.getElementById("op2").className='op'
                                document.getElementById("op3").className='opclicado'
                                document.getElementById("op4").className='op'
                                document.getElementById("op5").className='op'
                               
                             }
						                    if( arguments[0] = 1)
                             {
                                document.getElementById("op1").className='op'
                                document.getElementById("op2").className='op'
                                document.getElementById("op3").className='op'
                                document.getElementById("op4").className='opclicado'
                                document.getElementById("op5").className='op'
                               
                             }
						                    if( arguments[0] = 1)
                             {
                                document.getElementById("op1").className='op'
                                document.getElementById("op2").className='op'
                                document.getElementById("op3").className='op'
                                document.getElementById("op4").className='op'
                                document.getElementById("op5").className='opclicado'
                               
                             }

                           
                    }
</script>

Se não for diz-me como fazer para cinco variáveis como eu tentei...

Cumps.

P.S: O exemplo que eu mostrei era só para terem uma ideia do que eu queria e não para se guiarem pelo código e tudo...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não precisas de JavaScript para fazer o que queres, basta usares CSS tal como o marinheiro e o TheDark indicaram.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Mas eu apenas estou a fazer um template que outra pesso vai utilizar e modificar...

E eu não sei se ela vai perceber isto...mas vou então fazer como o marinheiro e o TheDark disseram.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

A utilização do CSS é a forma mais viável, tal como já te tinha dito.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Se a pessoa não percebe muito do assunto com CSS ficas com o caso arrumado LuPereira , não vale a pena inventar :confused:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

OK.

Então eu uso o CSS.

Obrigado.

Assunto resolvido.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora