从事网络建站十几年,一直都是用真实链接来展示网页,不太喜欢用TAB切换的方式来展示、虽然TAB切换表面看是要方便一些,直接点一下就显示出来了,如果用真实链接的话,还需要重新加载网页。但是,用TAB切换会让首页打开更慢一些,因为TAB切换所隐藏的内容其实访问首页的时候已经加载了,这就让访客加载了可能不需要访问的页面内容了。
但是,最近有很多需要TAB切换的方式来展示网页的站长找我,想要我帮忙编程一下,于是我在网上找了一下,发现大部分代码过于复杂,而且不够美观大气,于是花了几个小时的时间写了一个完整版的TAB切换代码,现在免费发布,需要的站长朋友随便拿去用。
<HTML><HEAD>
<META CHARSET=GB2312>
<TITLE>TAB 切换代码</TITLE>
<LINK REL=STYLESHEET HREF=//www.zwid.com/cangku/style.css>
<STYLE>.DYBK{DISPLAY:BLOCK}DYNE{DISPLAY:NONE}</STYLE>
</HEAD><BODY>
<TABLE WIDTH=600 CELLPADDING=0 CLASS=全局居中><TR>
<TD><BUTTON CLASS="黑色背景 B20 白色字体">按钮①号</BUTTON></TD>
<TD><BUTTON CLASS="灰色背景 B20 白色字体">按钮②号</BUTTON></TD>
<TD><BUTTON CLASS="灰色背景 B20 白色字体">按钮③号</BUTTON></TD>
<TD><BUTTON CLASS="灰色背景 B20 白色字体">按钮④号</BUTTON></TD>
<TD><BUTTON CLASS="灰色背景 B20 白色字体">按钮⑤号</BUTTON></TD>
</TR><TR HEIGHT=200 ALIGN=CENTER>
<TD CLASS="H05 Y05" COLSPAN=5>
<DYNE CLASS=DYBK>内容①号</DYNE>
<DYNE>内容②号</DYNE>
<DYNE>内容③号</DYNE>
<DYNE>内容④号</DYNE>
<DYNE>内容⑤号</DYNE>
</TD></TR></TABLE>
<SCRIPT>var buttonList=document.getElementsByTagName("BUTTON");
var divList=document.getElementsByTagName("DYNE");
for(var i=0;i<buttonList.length;i++)
{buttonList[i].index=i;buttonList[i].onclick=function()
{for(var j=0;j<buttonList.length;j++)
{buttonList[j].className="灰色背景 B20 白色字体";
divList[j].className=""}this.className="黑色背景 B20 白色字体";
divList[this.index].className="DYBK";}}</SCRIPT>
</BODY></HTML> |