Javascript + Jquery

Pessoal,

Estou utilizando Jquery UI Tabs:

http://jqueryui.com/demos/tabs/

Quero que quando a pessoal clicar em uma aba, tambem chame uma função javascript normal q eu fiz:

 <div id=tabsl>
 <UL>
<LI><A href="#tabs-f" onclick="AlterarStp(1);">Frente</A></LI>
<LI><A href="#tabs-a" onclick="AlterarStp(2);">Costas</A></LI>
</UL>

<DIV id=tabs-f style="width:353px;">
</div>

<DIV id=tabs-a style="width:353px;">
</div>
</div>

<script>
	$(function() {
 $( "#tabsl" ).tabs({
 cookie: {
 // store cookie for a day, without, it would be a session cookie
 expires: 1
 }
 });

function AlterarStp(aba) {
if(aba == 1) {
document.getElementById('stp1').style.display = "block";
document.getElementById('stp2').style.display = "none";
document.getElementById('stp3').style.display = "none";
document.getElementById('stp4').style.display = "none";
}else if (aba == 2) {
document.getElementById('stp1').style.display = "none";
document.getElementById('stp2').style.display = "block";
document.getElementById('stp3').style.display = "none";
document.getElementById('stp4').style.display = "none";
}

Reparam que coloquei pra chamar a função AlteraSTP dentro no <A> na propria ABA:

<A href="#tabs-f" **onclick="AlterarStp(1);"**>Frente</A>

mais ele nao chama a função. Só muda a aba.

Alguem tem alguma solução/sugestão?

Obrigado