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

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