DHTML实例解析:模拟Windows选项卡

整个“面板”的样式实现

  或许,我们首先关心的是整个能看到的样子是怎么实现的。其实就是一个表格,
通过用CSS设置表格及单元格的边框以及背景色实现的,我们可以看一下CSS代码:
.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; 


} /*整个面板(即表格)的外观*/
  具体属性可参阅相关资料。


 实际效果的实现

  几个要点,最初的例子中都写出来了,tbody、tbodies、cells、display,
这里就不再多讲。有一点要说明的是:事实上,tbodies集合就是一个table中tbody
块的个数,cells就是一个table中td的个数。
  下面我们来看看实现最后效果的JavaScript函数:
function secBoard(n)  
//参数n表示点击的是哪一个按钮 { for(i=0;i //通过循球让所有按钮变为未选中状态 secTable.cells[n].className="sec2";
//把点击的按钮变为选中状态 for(i=0;i //先让所有的单元格变为隐藏状态 mainTable.tBodies[n].style.display="block";
//根据哪一个按钮被点击,让对应的单元格显示 } 以下是代码:








<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 border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
        <tr height=20 align=center>
          <td class=sec2 width=10% οnclick="secBoard(0)">关于TBODY标记</td>
          <td class=sec1 width=10% οnclick="secBoard(1)">关于cells集合</td>
          <td class=sec1 width=10% οnclick="secBoard(2)">关于tBodies集合</td>
          <td class=sec1 width=10% οnclick="secBoard(3)">关于display属性</td>
        </tr>
      </table>
      <table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab>
        <tbody style="display:block;">
        <tr>
          <td align=center valign=top> <br>
            <br>
            这里填加内容,略去。1 </td>
        </tr>
        </tbody> <tbody style="display:none;">
        <tr>
          <td align=center valign=top> <br>
            <br>
            这里填加内容,略去。2 </td>
        </tr>
        </tbody> <tbody style="display:none;">
        <tr>
          <td align=center valign=top> <br>
            <br>
            这里填加内容,略去。3 </td>
        </tr>
        </tbody> <tbody style="display:none;">
        <tr>
          <td align=center valign=top> <br>
            <br>
            这里填加内容,略去。4 </td>
        </tr>
        </tbody>
      </table>








  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值