JavaScript script com Jquery e função active para várias classes diferentes

[AndréAraujo 2]

Olá, tenho um JavaScript para deixar o primeiro botão de uma determinada lista ativo e manter os outros selecionados ao clicar. Como não tenho muito conhecimento em JQuery resolvi criar outras funções para gerar os efeitos de transição, até ai tudo bem o código funcionou "corretamente", mas agora resolvi adicionar imagens na lista de botões, cada botão tem uma imagem diferente onde os botões inativos tem imagens em preto e branco e o ativo tem uma imagem colorida.

 

Gostaria de saber se alguém tem alguma sugestão de como fazer o script reconhecer a classe do botão ativo para chamar a imagem correta, também fazer o efeito fadeIn() para a div que foi chamada e o efeito hide() para a div que foi ocultada.

 

Atualmente meu script se encontra assim:

<script src="js/jquery.js"></script>

<script>

      $(document).ready(function(){
             $("#f1").click(function(){
                  $("#div1").fadeIn(500);
                  $("#div2").hide();
                  $("#div3").hide();
            });
            $("#f2").click(function(){
                  $("#div2").fadeIn(500);
                  $("#div1").hide();
                  $("#div3").hide();
            });
            $("#f3").click(function(){
                  $("#div3").fadeIn(500);
                  $("#div1").hide();
                  $("#div2").hide();
            });
      });

</script>

<style>

.active{
      background-color:#dadada;
}
.div1{
      background-image:url(imagens/div1_preto_e_branco.png);
      background-position:center;
      background-repeat:no-repeat;
} 
.div2{
      background-image:url(imagens/div2_preto_e_branco.png);
      background-position:center;
      background-repeat:no-repeat;
} 
.div3{
      background-image:url(imagens/div3_preto_e_branco.png);
      background-position:center; 
      background-repeat:no-repeat;
}
.div1:hover{
      background-image:url(imagens/div1_colorida.png);
      background-position:center;
      background-repeat:no-repeat;
} 
.div2:hover{
      background-image:url(imagens/div2_colorida.png);
      background-position:center; 
      background-repeat:no-repeat;
}
.div3:hover{
      background-image:url(imagens/div3_colorida.png);
      background-position:center; 
      background-repeat:no-repeat;
}

</style>

<ul>
            
        <li><a type="button" id="f1" class="botao div1"></a></li>
        <li><a type="button" id="f2" class="botao div2"></a></li>
        <li><a type="button" id="f3" class="botao div3"></a></li> 
                
</ul>

<div id="div1" style="display:block;">Conteúdo 1</div>

<div id="div2">Conteúdo 2</div>

<div id="div3">Conteúdo 3</div>

<script>
      $(document).ready(function () {
            $('a.botao').click(function () {
                  $('a.botao.active').removeClass("active");
                  $(this).addClass("active");
      });
            var primeiro = document.getElementsByClassName('botao')[0];
            if (primeiro) $(primeiro).addClass("active");
      });
</script>

Agradeço a atenção

[wootzor 103]

No último excerto, experimenta trocar:

var primeiro = document.getElementsByClassName('botao')[0];

por

var primeiro = $('.botao').first();

[AndréAraujo 2]

Olá wootzor, muito obrigado pela dica do:

var primeiro = $('.botao').first();

Sobre fazer o script reconhecer a imagem colorida correta foi só add a class + .active.

 

Ex:

.div1.active, .div1:hover{
      background-image:url(imagens/div1_colorida.png);
      background-position:center;
      background-repeat:no-repeat;
} 
.div2.active, .div2:hover{
      background-image:url(imagens/div2_colorida.png);
      background-position:center;
      background-repeat:no-repeat;
}
.div3.active, .div3:hover{
      background-image:url(imagens/div3_colorida.png);
      background-position:center;
      background-repeat:no-repeat;
}

Agora estou tentando fazer com que o script reconheça as divs para gerar os efeitos de transição sem que eu tenha que ficar adicionando classe por classe em um script separado. Só que até agora não obtive muito sucesso.

 

Quando conseguir postarei aqui, mais uma vez obrigado pela atenção.