zoukankan      html  css  js  c++  java
  • HTML+CSS模拟的Tab控件

    <html>

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
            <title>网页特效代码|JsCode.CN|---经典实用的触发型导航菜单</title>

        </head>

        <body>

            <STYLE type=text/css>
            .sec1 {
        BORDER-RIGHT: gray 1px solid; BORDER-TOP:

    #ffffff 1px solid; BORDER-LEFT: #ffffff 1px

    solid; CURSOR: hand; COLOR: #000000; BORDER-

    BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:

    #eeeeee
    }
    .sec2 {
        BORDER-RIGHT: gray 1px solid; BORDER-TOP:

    #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-

    LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:

    #000000; BACKGROUND-COLOR: #d4d0c8
    }
    .main_tab {
        BORDER-RIGHT: gray 1px solid; BORDER-

    LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-

    BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
    }
    </STYLE>
            <!--JavaScript部分-->
            <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>
            <!--HTML部分-->
            <TABLE id=secTable border="1" align="center" cellpadding="0"
                cellspacing="0" bordercolor="#FFFFFF" bgcolor="#9999CC">
                <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>
  • 相关阅读:
    法正(17):玄德
    法正(16):舌战
    法正(15):卢氏
    法正(14):寿星
    struts2笔记---struts2的执行过程
    Oracle数据库(一)
    flask的使用(一)
    struts2--笔记(一)
    docker基础(二)
    docker安装及问题处理
  • 原文地址:https://www.cnblogs.com/lilyzhang/p/1577982.html
Copyright © 2011-2022 走看看