Tab选项面板(不带图片版)

<style type="text/css">
.myct{
    height: 100px;
    border-right: 1px solid #99CCFF;
    border-bottom: 1px solid #99CCFF;
    border-left: 1px solid #99CCFF;
    width: 593px;
    padding-top: 5px;
    padding-left: 5px;
}
.lib_Menubox {
    height:28px;
    line-height:28px;
    border-bottom: 1px solid #95C9E1;
    width: 600px;
}
.lib_Menubox ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    height: 25px;
    position: relative;
    top: 2px;
}
.lib_Menubox li {
    float:left;
    display:block;
    cursor:pointer;
    margin-right:8px;
    line-height:25px;
    width:114px;
    border-top: 1px solid #99CCFF;
    border-right: 1px solid #99CCFF;
    border-left: 1px solid #99CCFF;
    text-align: center;
    font-weight:bold;
}
.normaltab {
    color:#949694;
    background:#E4F2FD;
}
.hovertab {
    background:#FFFFFF;
    color:#739242;
    height:26px;
}
.dis {
    display: block;
}
.undis {
    display: none;
}
</style>

<script type="text/javascript" language="javascript">   
//<!CDATA[   
function HoverLi(n){   
//如果有N个标签,就将i<=N;   
for(var i=1;i<=4;i++)
{//全部重写成normaltab与undis,后再设成dis与hovertab;
    document.getElementById('tb_'+i).className='normaltab';
    document.getElementById('tbc_0'+i).className='undis';
}

    document.getElementById('tbc_0'+n).className='dis';
    document.getElementById('tb_'+n).className='hovertab';   
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;  
//]]>   
</script>

<div class="mytab">
  <div class="lib_Menubox">
    <ul>
      <li id="tb_1" class="normaltab" onclick="HoverLi(1);">源码爱好者</li>
      <li id="tb_2" class="hovertab"  onclick="HoverLi(2);">最新更新</li>
      <li id="tb_3" class="normaltab" onclick="HoverLi(3);">下载排行</li>
      <li id="tb_4" class="normaltab" onclick="HoverLi(4);">大 乐 斗</li>
    </ul>
  </div>
  <div class="myct">
    <div  id="tbc_01" class="dis">这里是ASP.NET的相关内容</div>
    <div  id="tbc_02" class="undis" >这里是VB.NET的相关内容</div>
    <div  id="tbc_03" class="undis" >这里是JAVA的相关内容</div>
    <div  id="tbc_04" class="undis" >这里是PHP5的相关内容</div>
  </div>
</div>

 下载原文件--自来Ewin原创

 

下载带图版