css 를 이용한 tab 메뉴

<script type="text/javascript">
var isFirst = true;
var unitType = 0 ;
var unitTable = new Array("","","","");

function selectType(t,s)
{
if (isFirst) isFirst = false ;
for (var i=0; i<unitTable.length; i++)
{
if (i == t)
{
document.getElementById('type'+i).className = "on" ;
unitType = t ;
}
else
{
document.getElementById('type'+i).className = "" ;
}
}

}
</script>
<style type="text/css">
#unit_change{position:relative; z-index:100; width:303px; margin:14px 0 10px 0;}
#unit_change a{text-decoration:none;}
#unit_change a:hover{text-decoration:underline;}

/* 탭1 */
#unit_change .tab01{overflow:hidden; width:303px; background:url('<?=$g4[shop_path]?>/img/minishop/bg_tab.gif') repeat-x;list-style:none; margin:0; padding:0;}
#unit_change .tab01 li{float:left; margin-right:2px; height:25px; background:url('<?=$g4[shop_path]?>/img/taboff_tl.gif') repeat-x;}
#unit_change .tab01 li p{float:left; margin:0; padding:0; background:url('<?=$g4[shop_path]?>/img/minishop/taboff_tr.gif') no-repeat right top;}
#unit_change .tab01 li.on{background:url('<?=$g4[shop_path]?>/img/minishop/tabon_tl.gif') repeat-x; letter-spacing:-1px}
#unit_change .tab01 li.on p{background:url('<?=$g4[shop_path]?>/img/minishop/tabon_tr.gif') no-repeat right top;}
#unit_change .tab01 li p img{vertical-align:top;}
#unit_change .tab01 li a{display:block; padding:6px 20px 3px 20px; color:#666; text-decoration:none;}
#unit_change .tab01 li a:hover{text-decoration:none;}
#unit_change .tab01 li.on a{display:block; padding-top:7px; color:#464646; text-decoration:none; font-weight:bold;}

</style>


<div id="unit_change" align="left">
<ul class="tab01">
<li class="on" id="type0">
<p><a href="#" onclick="selectType(0);return false">Woman</a></p>
</li>
<li id="type1">
<p><a href="#" onclick="selectType(1);return false">Man</a></p>
</li>
<li id="type2">
<p><a href="#" onclick="selectType(2);return false">Kid</a></p>
</li>
<li id="type3">
<p><a href="#" onclick="selectType(3);return false">Etc</a></p>
</li>
</ul>
</div>