Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MatheusSilva

Troca de background com efeito de abas js

Por , em Javascript

Recommended Posts

MatheusSilva    0

MatheusSilva
Postado

ola, eu estou tentando fazer um efeito com abas para meu site, ja consegui mas queria que o menu tbm trocasse a cor do fundo, segue meu codigo:

 

 

 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
                $(".aba:First").show();

                $("#menu a").click(function(){
                    $(".aba").hide();
                    var div = $(this).attr('href');

                    $(div).show();




                    return false;


                })    




        });




    </script>
    <link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
    <div id="header">
        <a href="#"><img src="imagens/logo.png" border="0" /></a>
    </div>

    <div id="menu">
        <ul>
            <li  class="home"><a href="#home">Inicio</a></li>
            <li class="empresa"><a href="#empresa">Empresa</a></li>
            <li class="servicos"><a href="#servicos" >Serviços</a></li>
            <li class="portifolio"><a href="#portifolio" >Portifólio</a></li>
            
        </ul>

    </div>
            <div class="clear"></div>


            
<div id="conteudo">
            <div id="home" class="aba">
                <ul id="index">

                </ul>
            </div>


            <div id="empresa" class="aba" >
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>

            <div id="servicos" class="aba">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>

            <div id="portifolio" class="aba">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>




    </div><!--conteudo-->

<div class="clear"></div>



</div><!--box-->


</body>
</html>

 

 

alguem pode me dar uma ajuda com isso?

procurando acabei achando um site com um exemplo +- do que eu quero.

http://cristiano.galdino.net

 

obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

fernandotholl    19

fernandotholl
Postado

Simples, depois de $(div).show(); coloque:

 

/* ... */
$(div).show();
$(div).css('background-color', '#000');

Compartilhar este post

Link para o post
Compartilhar em outros sites

MatheusSilva    0

MatheusSilva
Postado

creio que nao entendeu, quero trocar o bg do menu, mas ja tentei fazer isso que me disse ele fica desse jeito:

 

skuj9e.png

 

codigo:

 

 
$(div).show();
$(this).parent('li').css('background', 'red');

mesmo se eu apertar no link EMPRESA por exemplo, ambos ficam com o background vermelho.

 

queria que quando clicasse no 2, o 1 ficasse sem o bg, e assim sucessivamente

Compartilhar este post

Link para o post
Compartilhar em outros sites

fernandotholl    19

fernandotholl
Postado

Opa, peço desculpas, realmente não havia entendido sua dúvida.

 

O modo mais simples é a cada clique "resetar" a cor inicial, veja:

 

$('#menu li').css('background', 'green'); /* Coloca verde como padrão */
$(this).parent('li').css('background', 'red');

 

 

Só troque a cor pela a utilizada no seu CSS.

 

Espero ter ajudado, se sim marque como Resolvida neste post! :joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites

MatheusSilva    0

MatheusSilva
Postado

Opa, peço desculpas, realmente não havia entendido sua dúvida.

 

O modo mais simples é a cada clique "resetar" a cor inicial, veja:

 

$('#menu li').css('background', 'green'); /* Coloca verde como padrão */
$(this).parent('li').css('background', 'red');

 

 

Só troque a cor pela a utilizada no seu CSS.

 

Espero ter ajudado, se sim marque como Resolvida neste post! :joia:

obrigado.

mais uma duvida, para fazer com que na hora que apareça o conteudo das divs ele exiba com um fade tenho que fazer assim?

 

 

$(div).fadeIn('fast');

Compartilhar este post

Link para o post
Compartilhar em outros sites

fernandotholl    19

fernandotholl
Postado

Isso mesmo! Correto

 

Se minha resposta resolveu seu problema, marque-a como resolvida, assim organizamos o Fórum! Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

MatheusSilva    0

MatheusSilva
Postado

Isso mesmo! Correto

 

Se minha resposta resolveu seu problema, marque-a como resolvida, assim organizamos o Fórum! Obrigado

só mais uma coisa, se eu quizer colocar css3 na função css() do javascript, funciona?

Compartilhar este post

Link para o post
Compartilhar em outros sites

fernandotholl    19

fernandotholl
Postado

Funciona, pois a renderização depende única e exclusivamente do seu navegador, e não do JavaScript.

Com o jQuery você pode fazer até algumas animações que utilizam CSS 3, um exemplo:

 

http://ricostacruz.com/jquery.transit/

 

Espero ter ajudado

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito