选项卡--简

tm/bg_13.gif

tm/bg_14.gif

效果一

效果二

核心代码讲解
Javascript: 关键词 ul层 li层 大div层 小div层

<script type="text/javascript">
window.$=document.getElementById;
//tabpage:ul层的id；tabid：li层的id；divbar：大div层的id；
function doClick(tabpage,tabid,divbar){
     var Tab=$(tabpage);//获取ul层
     for(var i=0;i<Tab.children.length;i++)
     {//循环遍历ul层下的所有li层
         var x=Tab.children(i);//每个循环中，获取li层
         x.className="";//每个循环中，设置该li层的样式类为空
     }//以上循环，设置ul层下的所有li层的样式类为空
    $(tabid).className = "selected";//然后这里，设置id为tabid的li层样式类为selected
    var dvs=$(divbar).getElementsByTagName("div");//获取大div层下的所有小div层
    for (var i=0;i<dvs.length;i++){//循环遍历大div层下的所有小div层
      if (dvs[i].id==(tabpage+tabid))//小div层id的命名规则：ul层tarpage+li层tabid
                                         //判断小div层id是否是当前tarpage+tabid的组合
        dvs[i].style.display='block';//如果是，设置该小div层为显示，其他小div层隐藏
      else
        dvs[i].style.display='none';
    }
}
</script>

html：关键词 ul层 li层 大div层 小div层

<div id="myul">
    <!--ul层TabBar-->
    <ul id="TabBar">
      <!--li层tab1，tab2，-->
      <li id="tab1" class="selected" style="background-position:left top"><a href="javascript:void(0)" onclick="doClick('TabBar','tab1','total')">兼职雇员</a></li>
      <li id="tab2"><a href="javascript:void(0)" onclick="doClick('TabBar','tab2','total')">普通职员</a></li>
      <li id="tab3"><a href="javascript:void(0)" onclick="doClick('TabBar','tab3','total')">熟练技工</a></li>
      <li id="tab4"><a href="javascript:void(0)" onclick="doClick('TabBar','tab4','total')">专业人才</a></li>
      <li id="tab5" style="background-position:right top;"><a href="javascript:void(0)" onclick="doClick('TabBar','tab5','total')">猎头秀才</a></li>
    </ul>
</div>

<!--大div层total-->
<div id="total">
    <!--小div层TabBartab1，TabBartab2，
    小div层命名规则：ul层TabBar+li层(tab1，tab2，)-->
    <div id="TabBartab1" class="dis">
        <!--小div层内的html代码省略！-->
    </div>
    <div id="TabBartab2" class="undis">
        <!--小div层内的html代码省略！-->
    </div>
    <div id="TabBartab3" class="undis">
        <!--小div层内的html代码省略！-->
    </div>
    <div id="TabBartab4" class="undis">
        <!--小div层内的html代码省略！-->
    </div>
    <div id="TabBartab5" class="undis">
        <!--小div层内的html代码省略！-->
    </div>
</div>

css：

#TabBar li/*id为TabBar的层下的li层默认样式*/
{
background:url(tm/bg_13.gif) no-repeat;
background-position:-97px 0;/*图片坐标正负值：图片左移是负，
                                图片右移是正；图片上移是负，图片下移是正；*/
padding:8px 0 0 50px;
height:28px;
width:84px;
}
#TabBar li a/*id为TabBar的层下的li层下的a链接层的默认样式*/
{
color:black;
}
#TabBar .selected/*selected样式类，只能用于id为TabBar的层下*/
{
background:url(tm/bg_14.gif) no-repeat;
height:28px;
background-position:-97px 0px;
padding:8px 0 0 50px;
}
#TabBar .selected a/*id为TabBar的层下，样式类设为选中的层下的a链接层样式*/
{
color:white;
}

源代码下载
/Files/women/选项卡.rar