js+table+css 的选项卡

最新推荐文章于 2021-07-15 13:56:44 发布

share4318

最新推荐文章于 2021-07-15 13:56:44 发布

阅读量733

点赞数

分类专栏： css+js 文章标签： table css border class function javascript

本文链接：https://blog.csdn.net/share4318/article/details/1375939

版权

css+js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<STYLE type=text/css>
.table1 {
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;
font-size:12px;
}
.table2 {
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;
font-size:12px;
}
.m_tab {
BORDER-RIGHT: gray 1px solid;
BORDER-LEFT: #ffffff 1px solid;
COLOR: #000000;
BORDER-BOTTOM: gray 1px solid;
BACKGROUND-COLOR: #d4d0c8;

}

tbody{font-size:12px}

</STYLE>

<SCRIPT language=javascript>
     function choice(itemNo)
{
    for(i=0;i<t1.cells.length;i++)
      t1.cells[i].className="table1";
    t1.cells[itemNo].className="table2";

    for(i=0;i<t2.tBodies.length;i++)
      t2.tBodies[i].style.display="none";
   t2.tBodies[itemNo].style.display="block";
}
      </SCRIPT>

<div style="width:420;border:solid 1px black">
            <TABLE id=t1 cellSpacing=0 cellPadding=0 width=420 border=0>
              <TBODY>
              <TR align=middle height=20>
                <TD class=table2 οnclick=choice(0)>第一项</TD>
                <TD class=table1 οnclick=choice(1)>第二项</TD>
                <TD class=table1 οnclick=choice(2)>第三项</TD>
                <TD class=table1 οnclick=choice(3)>第四项</TD>
                </TR>
                </TBODY>
              </TABLE>


            <TABLE class=m_tab id=t2 cellSpacing=0 cellPadding=0 width=400 border=0>


                <TBODY style="DISPLAY: block">
                <TR>
                <TD vAlign=top align=middle style="padding:10px">


                      <TABLE cellSpacing=0 cellPadding=0 width=398 border=0>

                        <TR>
                          <td>
                          这里是第一项的内容......
                        </td>
                        </TR>

                        </TABLE>

                    </TD>
                    </TR>
                    </TBODY>


                  <TBODY style="DISPLAY: none">
                <TR>
                <TD vAlign=top align=middle style="padding:10px">


                      <TABLE cellSpacing=0 cellPadding=0 width=398 border=0>

                        <TR>
                          <td>
                          这里是第二项的内容......
                        </td>
                        </TR>

                        </TABLE>

                    </TD>
                    </TR>
                    </TBODY>

                  <TBODY style="DISPLAY: none">
                <TR>
                <TD vAlign=top align=middle style="padding:10px">


                      <TABLE cellSpacing=0 cellPadding=0 width=398 border=0>

                        <TR>
                          <td>
                          这里是第三项的内容......
                        </td>
                        </TR>

                        </TABLE>

                    </TD>
                    </TR>
                    </TBODY>


                  <TBODY style="DISPLAY: none">
                <TR>
                <TD vAlign=top align=middle style="padding:10px">


                      <TABLE cellSpacing=0 cellPadding=0 width=398 border=0>

                        <TR>
                          <td>
                          这里是第四项的内容......
                        </td>
                        </TR>

                        </TABLE>

                    </TD>
                    </TR>
                    </TBODY>

              </TABLE>