如何做到这样的TAB切换效果？

<img src="tab1.jpg" style="display:none;" />
<img src="tab2.jpg" style="display:none;" />
<div id="pb_content">
<div id="cont_nav" style="height: 43px; width: 254px; background:url(tab1.jpg) no-repeat top left;">
<div class="pb_tab" tabpos="0" style="height: 43px; width: 116px; float:left;"> </div>
<div class="pb_tab" tabpos="1" style="height: 43px; width: 136px; float:left;"> </div>
</div>
<div id="pb_cont0" class="pb_list"> </div>
<div id="pb_cont1" style="display: none;" class="pb_list"></div>
<script type="text/javascript">
<!--
var curPBT = 0;
function pb_over()
{
var newTab = document.getElementById(this).attr("tabpos");
if ((newTab != null) && (newTab != curPBT))
{
// $("#cont_nav").css("background-image", "url(" + (parseInt(newTab) + 1) + ".jpg)");
document.getElementById(this).css("cursor", "pointer");
}
}
function pb_out()
{
var newTab = document.getElementById(this).attr("tabpos");
if ((newTab != null) && (newTab != curPBT))
{
// $("#cont_nav").css("background-image", "url(" + (parseInt(curPBT) + 1) + ".jpg)");
document.getElementById(this).css("cursor", "default");
}
}
function pb_click()
{
var newTab = document.getElementById(this).attr("tabpos");
if ((newTab != null) && (newTab != curPBT))
{
document.getElementById("#pb_cont" + newTab).show();
document.getElementById("#pb_cont" + curPBT).hide();
curPBT = newTab;
document.getElementById("#cont_nav").css("background-image", "url(images/powerbar_tab" + (parseInt(curPBT) + 1) + ".jpg)");
document.getElementById(this).css("cursor", "default");
}
}
document.getElementById(document).ready(function()
{
document.getElementById("#cont_nav div.pb_tab").each(function(){
document.getElementById(this).mouseenter( pb_over );
document.getElementById(this).mouseleave( pb_out );
document.getElementById(this).click( pb_click );
});
});
-->
</script>