【 View】【收藏】【推荐】【评论】 采用Table+CSS实现的TabPane选项卡 (2008-02-28 )

下载 Download：
迅雷下载(推荐)　|　本地下载(电信)

来源：预览网址：#

重要：当提供源代码在代码框显示时，下载和演示地址可能无效，请点击下面的运行代码查看效果！

<style type="text/css">



td { 
  font-size: 12px;
  color: #000000;
  line-height: 150%;
  }
.sec1 { 
  background-color: #EEEEEE;
  cursor: hand;
  color: #000000;
  border-left: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid gray;
  border-bottom: 1px solid #FFFFFF
  }
.sec2 { 
  background-color: #D4D0C8;
  cursor: hand;
  color: #000000;
  border-left: 1px solid #FFFFFF; 
  border-top: 1px solid #FFFFFF; 
  border-right: 1px solid gray; 
  font-weight: bold; 
  }
.main_tab {
  background-color: #D4D0C8;
  color: #000000;
  border-left:1px solid #FFFFFF;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray; 
  }</style><script language=javascript>
function secBoard(n)
{
 for(i=0;i<secTable.cells.length;i++)
  secTable.cells[i].className="sec1";
 secTable.cells[n].className="sec2";
 for(i=0;i<mainTable.tBodies.length;i++)
  mainTable.tBodies[i].style.display="none";
 mainTable.tBodies[n].style.display="block";
}
</script>
<table id="secTable" cellspacing="0" cellpadding="0" width="549" border="0">
    <tbody>
        <tr align="center" height="20">
            <td class="sec2" onclick="secBoard(0)" width="10%">关于TBODY标记</td>
            <td class="sec1" onclick="secBoard(1)" width="10%">关于cells集合</td>
            <td class="sec1" onclick="secBoard(2)" width="10%">关于tBodies集合</td>
            <td class="sec1" onclick="secBoard(3)" width="10%">关于display属性</td>
        </tr>
    </tbody>
</table>
<table id="mainTable" height="240" cellspacing="0" cellpadding="0" width="549" border="0" class="main_tab">
    <tbody style="DISPLAY: block">
        <tr>
            <td valign="top" align="center"><br /><br />这里填加内容，略去。1 </td>
        </tr>
    </tbody>
    <tbody style="DISPLAY: none">
        <tr>
            <td valign="top" align="center"><br /><br />这里填加内容，略去。2 </td>
        </tr>
    </tbody>
    <tbody style="DISPLAY: none">
        <tr>
            <td valign="top" align="center"><br /><br />这里填加内容，略去。3 </td>
        </tr>
    </tbody>
    <tbody style="DISPLAY: none">
        <tr>
            <td valign="top" align="center"><br /><br />这里填加内容，略去。4 </td>
        </tr>
    </tbody>
</table>

提示：您可以修改部分代码再运行，复制和保存功能在Firefox下无效。

上一篇：126邮箱TAB效果(同一页面可多次使用) 下一篇：google纵向tab滑动门代码

来源：预览网址：#

上一篇：126邮箱TAB效果(同一页面可多次使用) 下一篇：google纵向tab滑动门代码

共有 0 位酷友发表了评论, 点此查看全部酷友评论(Comments)

添加评论(Add Comments) 不能超过250字，需审核，请自觉遵守互联网相关政策法规。

昵称：论坛注册

服务赞助商

随机显示10条设计素材

采用Table+CSS实现的TabPane选项卡

jQuery的11种表格切换效果代码下载

网易滑动门TAB导航菜单

google纵向tab滑动门代码

div+css 纵向滑动门代码

Easy Tabs js表格切换代码

横向div+css滑动门代码 4

126邮箱TAB效果(同一页面可多次使用)

酷站 + 代码 + 滑动门代码 Tabs + 详细内容

来源： 预览网址：#

上一篇：126邮箱TAB效果(同一页面可多次使用) 下一篇：google纵向tab滑动门代码

共有 0 位酷友发表了评论, 点此查看全部 酷友评论(Comments)

添加评论(Add Comments) 不能超过250字，需审核，请自觉遵守互联网相关政策法规。

昵称： 论坛注册 密码： 匿名?

服务赞助商

随机显示10条设计素材

来源：预览网址：#

共有 0 位酷友发表了评论, 点此查看全部酷友评论(Comments)

昵称：论坛注册