选项卡--简

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_30877181

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/women/archive/2009/10/14/1582891.html

本文介绍了一种使用HTML、CSS及JavaScript实现的选项卡切换效果。通过点击不同的标签项可以切换显示对应的内容区域，同时改变标签项的样式来指示当前选中的标签。此效果适用于网页导航或内容区切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tm/bg_13.gif

tm/bg_14.gif

效果一

效果二

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

Code
<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层

Code
<div id="myul">
    
    <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 id="total">
    <!--小div层TabBartab1，TabBartab2，

小div层命名规则：ul层TabBar+li层(tab1，tab2，

)-->
    <div id="TabBartab1" class="dis">
        
    </div>
    <div id="TabBartab2" class="undis">
        
    </div>
    <div id="TabBartab3" class="undis">
        
    </div>
    <div id="TabBartab4" class="undis">
        
    </div>
    <div id="TabBartab5" class="undis">
        
    </div>
</div>

css：

Code
#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

转载于:https://www.cnblogs.com/women/archive/2009/10/14/1582891.html