js tab块

最新推荐文章于 2022-05-31 08:16:25 发布

learnTech

最新推荐文章于 2022-05-31 08:16:25 发布

阅读量1.2k

点赞数

分类专栏： Java javascript

本文链接：https://blog.csdn.net/learnTech/article/details/8755931

版权

Java 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

javascript

16 篇文章 0 订阅

订阅专栏

html:

<TABLE width="72%" border="0" cellPadding="0" cellSpacing="0" id="secTable">
                <TBODY>
                  <TR align=middle height=20>
                    <TD align="center" class=sec2 οnclick="javascript:;secBoard(0)">验证信息</TD>
                    <TD align="center" class=sec1 οnclick="javascript:;secBoard(1)">统计信息</TD>
                    <TD align="center" class=sec1 οnclick="javascript:;secBoard(2)">系统参数</TD>
                    <TD align="center" class=sec1 οnclick="javascript:;secBoard(3)">版权说明</TD>
                  </TR>
                </TBODY>
              </TABLE>
          <TABLE class="main_tab" id="mainTable">
                <!--关于验证信息标记-->
                <TBODY style="DISPLAY: block">
                  <TR>
                            <TD>您有未验证商家商品：</TD>
                  </TR>
                </TBODY>
                <!--关于统计信息集合-->
                <TBODY style="DISPLAY: none">
                  <TR>
                            <TD>本站现有市场资讯：条</TD>
                  </TR>
                </TBODY>
                <!--关于系统参数集合-->
                <TBODY style="DISPLAY: none">
                  <TR>
                            <TD">服务器类型：</TD>
                </TBODY>
                <!--关于版权说明属性-->
                <TBODY style="DISPLAY: none">
                  <TR>
                            <TD>本程序仅提供使用，任何违反互联网规定的行为，自行负责！</TD>
                  </TR>
                </TBODY>
            </TABLE>

javascript：

<script type="text/javascript">
function secBoard(n)
{
	secTD = document.getElementById("secTable").getElementsByTagName("td");//一种获取table中所有td的方法
	for(i=0;i<secTD.length;i++)
		secTD[i].className="sec1";
	secTD[n].className="sec2";
	mainTable = document.getElementById("mainTable");  
	for(i=0;i<mainTable.tBodies.length;i++)//另一种获取table
		mainTable.tBodies[i].style.display="none";
	mainTable.tBodies[n].style.display="block";
}
</script>

css

.sec1 {
	CURSOR: hand;
	COLOR: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 25px;
	border: 1px solid #B5D0D9;
	background-image: url(right_smbg.jpg);
	background-repeat: repeat-x;
}
.sec2 {
	FONT-WEIGHT: bold;
	CURSOR: hand;
	COLOR: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 25px;
	background-color: #e2e7ed;
	border: 1px solid #e2e7ed;
}
.main_tab {
	COLOR: #000000;
	BACKGROUND-COLOR: #e2e7ed;
	border: 1px solid #e2e7ed;
}