Ir para conteúdo
Fórum Script Brasil
  • 0

Trocar cor de elemento ao clicar


vini_loock

Pergunta

Olá.

Eu fiz um menu que tem a opção login e quando clica em login aparece uma 'div' logo abaixo com os campos login e senha.

Só que eu quero que esse link 'login' ao ser clicado ele troque a cor de fundo, isso eu consegui fazer, mas eu to verificando se a 'div' de login já foi aberta se sim eu fexo ela, caso contrario eu abro ela, e mudaria a cor do botão, mas ele não ta trocando, se eu colocar direto inline ele troca, mas dai quando fexa a 'div' menu ele continua com a mesma cor.

Segue o código.

function mostrar(){
        var display = document.getElementById("submenu").style.display;
        if(display != 'none'){
            document.getElementById("submenu").style.display = 'none'
        }else{
            document.getElementById("submenu").style.display = 'block'
            this.style.background = '#fff'; 
            this.style.borderBottom = '1px solid #fff';
        }
    }
E no link ta assim:
<a href="java script: mostrar();">Login......

Bom.. é isso, conto com a ajuda de vocês!

Vlw

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

Vini_loock,

se você utiliza JQuery, tem uma forma bem simples de saber se um elemento está visível:

function mostrar(){
    
    if($('#submenu').is(':visible'))
        $('#submenu').hide();
    else
        $('#submenu').show();
}
para uma 'frescura' a mais, você pode colocar efeitos fadeIn e fadeOut:
function mostrar(){
    
    if($('#submenu').is(':visible'))
        $('#submenu').fadeOut();
    else
        $('#submenu').fadeIn();
}

Editado por OxCom
Link para o comentário
Compartilhar em outros sites

  • 0

Entendi sim...

primeiro um CSS de teste:

<style>
#submenu{display:none;}

.corVisible{background-color:#00FF00;}
.corInvisible{background-color:#FF0000;}
</style>
Depois a função editada:
function mostrar(){
    
    if($('#submenu').is(':visible')){
        $('#submenu').fadeOut();
        $('#linkLogin').removeClass('corVisible').addClass('corInvisible');
    }
    else{
        $('#submenu').fadeIn();
        $('#linkLogin').removeClass('corInvisible').addClass('corVisible');
    }
        
}
por fim o link e a div submenu. Coloquei um id no link para mudar somente a cor deste link.
<a id="linkLogin" class="corInvisible" href="java script:void(0);" onclick="mostrar();">Login...</a>
    <div id="submenu">
        seu conteúdo
    </div>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...