一些实用的TAB效果- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一些实用的TAB效果

Javascript: JQuery 学习笔记选择器之四; JQuery 学习笔记选择器之五; JQuery 学习笔记选择器之六; JQuery CSS样式控制学习笔记; 用js模仿word格式刷功能实现代码 [推荐]; 运用jquery实现table单双行不同显示并能单行选中; jqPlot jquery的页面图表绘制工具; jquery tools之tabs 选项卡/页签; jquery tools之tooltip; 浅析Javascript原型继承推荐; JQuery UI皮肤定制; 实现lightBox时的样式与行为分离减少JS; JQuery 表格操作(交替显示、拖动表格行、选择行等); javascript 进度条实现代码; Javascript this指针; jquery imgareaselect 使用利用js与程序结合实现图片剪切; javascript 写的一个简单的timer; javascript 处理HTML元素必须避免使用的一种方法; Javascript 验证上传图片大小[客户端]; jQuery 隔行换色支持键盘上下键，按Enter选定值

No. « ‹ 223 224 225 226 › »

技术文章搜索

关键字

Javascript 中的一些实用的TAB效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 199 ::

收藏到网摘: n/a

多线程的全选复选框 Js中sort()方法的用法

点击运行可以看到效果:

<HTML><HEAD><TITLE>无标题文档</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<STYLE TYPE="text/css">
a, a:link{text-decoration: none; color:#000000; font-size:9pt;} a:visited{text-decoration: none; color:#000000;} a:hover{text-decoration: underline; color:red;}
BODY, TD, Select{FONT-SIZE:9pt; FONT-FAMILY:"宋体";}
#TabStrip {width:500px;background-color:#66CCFF;padding:10px;}
#TabStrip #TabCard{width:90%;margin:0px;list-style-type: none;}
#TabStrip #TabCard LI { float:left; width:100px; height:20px; padding-top:4px; border:1px #7d7d7d solid; border-bottom:none; background-color:#CCC; text-align:center; cursor:default; position:relative; margin:1px;
}
#TabStrip #TabBody DIV{ display:none; border:1px #7d7d7d solid; background-color:#FFF; width:100%; height:400px; padding:5px; margin-left:2px;
}
</STYLE>
<script language="javascript" type="text/JavaScript"> function getIE(obj){ var t=obj.offsetTop - obj.parentElement.scrollTop; var l=obj.offsetLeft - obj.parentElement.scrollLeft; while(obj=obj.offsetParent){ t+=obj.offsetTop - obj.parentElement.scrollTop; l+=obj.offsetLeft - obj.parentElement.scrollLeft; } return {top: t, left:l} }; function create_div(){ var div = document.createElement('div'); var b = document.createElement('b'); with(div.style){position = 'absolute';zIndex = '99999';borderTop='1px #FFF solid';width ='98px';height = '1px';pixelTop = '-100';pixelLeft = '-100';} div.id='_CARD_HR_'; div.appendChild(b); document.body.insertAdjacentElement('afterBegin', div); }; function set_tab_card(TabIndex){ var tab = document.getElementById('TabCard'); var bod = document.getElementById('TabBody'); var car = (typeof(TabIndex) != 'object')?tab.children[TabIndex]:TabIndex; var X_Y = getIE(car); if(typeof(_CARD_HR_) == 'undefined')create_div(); _CARD_HR_.style.pixelTop = X_Y.top+20; _CARD_HR_.style.pixelLeft = X_Y.left+1; for(var i=0; i < tab.children.length; i++){ tab.children[i].style.backgroundColor = (tab.children[i] == car)?'#FFF':'#CCC'; bod.children[i].style.display = (tab.children[i] == car)?'block':'none'; } };
</script>
</HEAD>
<BODY onload="set_tab_card(0);" bgcolor="#FFFFFF" text="#000000" leftmargin="20" topmargin="20">
<DIV id="TabStrip"> <UL id="TabCard"> <LI onclick="set_tab_card(this);">用户管理</LI> <LI onclick="set_tab_card(this);">用户组管理</LI> <LI onclick="set_tab_card(this);">用户组管理1</LI> </UL> <DIV id="TabBody"> <DIV>测丶式1</DIV> <DIV>测丶式2</DIV> <DIV>测丶式3</DIV> </DIV>
</DIV>
</BODY>
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

<html>
<head>
<title>项目申报</title>
<STYLE type="text/css">
body,td{ font-size:12px; color:#000000; background-color:threedface; vertical-align: middle;
}
.checkbox{width:12px;height:12px;}
.cked{ margin:0px;padding:0px;width:100%;display:block;background-color:highlight;color:highlighttext;
}
.nock{ margin:0px;padding:0px;width:100%;display:block;
}
.tab { cursor:hand; border-top:solid thin white; border-right:solid thin gray; border-left:solid thin threedface; font-family:Verdana; font-size:10pt; text-align:center; font-weight:normal}
.selTab { border-left:solid thin white; border-top:solid thin white; border-right:solid thin gray; font-size:10pt; font-weight:bold; text-align:center}
.td_no_bottom { width:100%; height:100%; border-color:white; border-bottom:0}
.td_top_right { width:100%; height:100%; border-color:white; border-bottom:0; border-left:0}
.td_no_left { width:100%; height:100%; border-color:white; border-left:0}
.td_all { width:100%; height:100%; border-color:white}
.title { font-size:16px; font-weight:bold;} .tips { background-color:transparent; border:0; color:#990000; font-size:14px;}
</STYLE>
<script LANGUAGE="JavaScript">
var menuItem=['1、申报基本信息','2、省技术创新项目申请表','3、技术创新项目立项建议书封面','4、项目开发的目的、意义及必要性','5、国际水平、现状及发展趋势','6、国内产品与技术发展水平、现状','7、项目前期研发及技术准备情况','8、项目产业化实施方案','9、项目进度安排与完成期限','10、技术经济指标','11、项目资金安排情况','12、进口设备仪器情况','13、社会、经济效益评价','14、项目承担单位及项目协作单位情况','15、其它需要说明的问题','格式及填写说明'];
var linkItem=['1.jsp','2.jsp','3.jsp','4.jsp','5.jsp','6.jsp','7.jsp','8.jsp','9.jsp','10.jsp','11.jsp','12.jsp','13.jsp','14.jsp','15.jsp','16.jsp'];
var col=0;
function init(c)
{ if(isNaN(c)) col=0; else col=Math.floor(c); win.innerHTML=public_Labels(menuItem); document.body.onclick=changeTabs; window.onresize=function(){win.innerHTML=public_Labels(menuItem);}
}
function public_Labels(labels)
{ var html=""; var menus=[]; var menu=""; var base=""; var bases=[]; var row=0; var row_all=1; var j=0; var menu_len=0; var frame_height=0; menus[0]='</table><table width=100% CELLPADDING=\"0\" CELLSPACING=\"0\"><tr HEIGHT=\"20\">'; bases[0]=''; for(var i=0;i<labels.length;i++) { menu_len+=labels[i].length; if(menu_len*22>document.body.scrollWidth) { j++; menus[j]="</table><table width=100% CELLPADDING=\"0\" CELLSPACING=\"0\"><tr HEIGHT=\"20\">"; bases[j]=""; menu_len=0; row_all++; } if(i==col) { menus[j]+="<td ID=\"t"+i+"\" CLASS=\"selTab\">"+labels[i]+"<\/td>"; bases[j]+="<td ID=\"t"+i+"base\" STYLE=\"height:2; border-left:solid thin white\"><\/td>"; row=row_all-1; } else { menus[j]+="<td ID=\"t"+i+"\" CLASS=\"tab\">"+labels[i]+"<\/td>"; bases[j]+="<td ID=\"t"+i+"base\" STYLE=\"height:2; background-color:white\"><\/td>"; } } for(var i=0;i<row_all;i++) { if(i!=row) menu+=menus[i]+"\n"; } menu+=menus[row]; base=bases[row]; frame_height=document.body.scrollHeight-row_all*22;
// alert(document.body.scrollHeight); html+=("<table STYLE=\"width:100%; height:100%\" CELLPADDING=\"0\" CELLSPACING=\"0\" bgcolor=\"#d4d0c7\">"); html+=( menu ); html+=(" <tr>"); html+=( base ); html+=(" <\/tr>"); html+=("<\/table>"); html+=("<table width=\"100%\" HEIGHT=\""+frame_height+"\" CELLPADDING=\"0\" CELLSPACING=\"0\">"); html+=(" <tr>"); html+=(" <td STYLE=\"border-left:solid thin white;border-bottom:solid thin white;border-right:solid thin white\">"); html+=(" <iframe frameborder=0 width='100%' height='100%' src='"+linkItem[col]+"'></iframe>"); html+=(" <\/td>"); html+=(" <\/tr>"); html+=("<\/table>"); return html;
}
function changeTabs()
{ if(window.event.srcElement.className == "tab") { col=window.event.srcElement.id.replace(/t/i,''); win.innerHTML=public_Labels(menuItem); }
}
</script>
</head>
<body onload="init()">
<div id="win" STYLE="position:absolute; top:0; left:10; height:100%; width:100%; border:none thin gray">
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

<html>
<head>
<title> New Document </title>
<style>
td { font-family: 宋体; font-size: 9pt;}
.ooib { border-width: 1px; border-style: none solid solid; border-color: #CC3333; background-color: #E4E5EE;}
.ooih td { border-width: 1px; padding: 0 5; }
.ooihj { color: #CC3333; background-color: #E4E5EE; border-style: solid solid none; border-color: #CC3333; cursor: hand}
.ooihs { color: #6600CC; background-color: #ccccFF; border-style: solid; border-color: #6600CC #6600CC #CC3333; cursor: hand}
.ooihx { border-style: none none solid; border-color: #CC3333; }
</style>
<script language="JavaScript">
function ghbq(td)
{ var tr = td.parentElement.cells; var ob = obody.rows; for(var ii=0; ii<tr.length-1; ii++) { tr[ii].className = (td.cellIndex==ii)?"ooihj":"ooihs"; ob[ii].style.display = (td.cellIndex==ii)?"block":"none"; }
}
</script>
</head>
<body>
<table class="ooih" border="0" cellspacing="0" cellpadding="0" width="400" height="19"> <tr>
<td class="ooihj" nowrap onclick="ghbq(this)">标签一</td>
<td class="ooihs" nowrap onclick="ghbq(this)">标签二</td>
<td class="ooihs" nowrap onclick="ghbq(this)">标签三</td>
<td class="ooihs" nowrap onclick="ghbq(this)">标签四</td>
<td class="ooihx" width="100%"> </td> </tr>
</table>
<table class="ooib" id="obody" border="0" cellspacing="0" cellpadding="0" width="400" height="300"> <tr> <td>
标签内容一 </td> </tr> <tr style="display: none"> <td>
标签内容二 </td> </tr> <tr style="display: none"> <td>
标签内容三 </td> </tr> <tr style="display: none"> <td>
标签内容四 </td> </tr>
</table>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

<HTML>
<HEAD>
<script>
var Num=4; //这里是增加选项卡的数目
var carNum=2+Num
function document.onselectstart()
{
var obj=event.srcElement
if(obj.tagName=="SPAN")
{
return false;
}
}
function document.onmousedown()
{
var obj=event.srcElement
var pobj=obj.parentElement.id;
if(obj.className=="span")
{ for(i=1;i<carNum;i++) { if(pobj==("btn"+i)) { document.all("td"+i).style.backgroundColor="green" document.all("btn"+i).style.height=20 content(i) } else { document.all("td"+i).style.backgroundColor="white" document.all("btn"+i).style.height=18 } }
}
}
function content(i)
{
//这里是菜单名
mnuItem(1,"第一项")
mnuItem(2,"图片世界")
mnuItem(3,"第三个内容")
mnuItem(4,"表格")
mnuItem(5,"滚动字幕")
//End
if(i==1)
{
span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女
"
+"<input>
<input>
<input type=submit>"
}
if(i==2)
{
span1.innerHTML="<img src=http://www.fnfnet.com/images/banner.gif width=250>"
}
if(i==3)
{
span1.innerHTML="<h1>第三个内容</h1>"}
if(i==4)
{
span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>"
+"<tr><td>aaaaaaaa</td></tr>"
+"<tr><td>bbbbbbbb</td></tr>"
+"<tr><td>ccccccccc</td></tr></table>"
}
if(i==5)
{
span1.innerHTML="<marquee>"
+"这是第五个内容"
+"啦啦..？</marquee>"
}
}
function mnuItem(i,con)
{
document.all("MenuName"+i).innerText=con
}
</script>
<style>td{font-size:9pt}
.span{
cursor:default;
padding-left:5;
padding-top:2;
padding-right:5;
padding-bottom:0;
width:100%;
height:100%;
color: yellow;
background-color: green;
}
</style>
<TITLE></TITLE>
<META http-equiv="content-type" content="text/html;charset=gb2312">
</HEAD>
<BODY bgcolor=FFFFFF onload=content(1) onselectstart="return false">
<table width=0 onselectstart="return false" bgcolor=green align=center><tr><td>
<table cellpadding=0 cellspacing=0 onselectstart="return false"> <tr height=20>
<td valign=bottom> <table cellspacing=0 cellpadding=0 bgcolor=green> <tr> <td width=1 height=1></td><td width=1 height=1></td> <td bgcolor=white></td><td></td><td></td> </tr> <tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td> <td></td><td bgcolor=black></td><td></td> </tr> <tr><td width=1 bgcolor=white></td><td width=1 height=1></td> <td id=btn1 height=20><span class=span id=MenuName1> </span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td> </tr> <tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=green id=td1></td> </tr> </table>
</td>
<script>
for(i=2;i<carNum;i++)
{
tdBody="<td valign=bottom>"
tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=green>"
tdBody+="<tr>"
tdBody+="<td width=1 height=1><\/td><td width=1 height=1><\/td>"
tdBody+="<td bgcolor=white><\/td><td></td><td></td>"
tdBody+="<\/tr>"
tdBody+="<tr><td width=1 height=1><\/td><td width=1 height=1 bgcolor=white><\/td>"
tdBody+="<td></td><td bgcolor=black><\/td><td></td>"
tdBody+="<\/tr>"
tdBody+="<tr><td width=1 bgcolor=white><\/td><td width=1 height=1><\/td>"
tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+"> <\/span></td><td width=1 bgcolor=gray><\/td><td bgcolor=black width=1><\/td>"
tdBody+="<\/tr>"
tdBody+="<tr><td bgcolor=white><\/td><td colspan=4 height=1 bgcolor=white id=td"+i+"><\/td>"
tdBody+="<\/tr>"
tdBody+="<\/table>"
tdBody+="<\/td>";
document.write(tdBody)
}
</script>
</td>
<td style="border-bottom:1 white solid" width=50> </td> </tr>
</table>
<div style="padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset">
<span id=span1></span>
</div>
</td></tr></table>
</BODY>
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

<HTML>
<HEAD>
<script>
var Num=4; //这里是增加选项卡的数目
var carNum=2+Num
function document.onselectstart()
{
var obj=event.srcElement if(obj.tagName=="SPAN") { return false; }
}
function document.onmousedown()
{ var obj=event.srcElement var pobj=obj.parentElement.id; if(obj.className=="span") { for(i=1;i<carNum;i++) { if(pobj==("btn"+i)) { document.all("td"+i).style.backgroundColor="menu" document.all("btn"+i).style.height=20 content(i) } else { document.all("td"+i).style.backgroundColor="white" document.all("btn"+i).style.height=18 } } }
}
function content(i)
{
//这里是菜单名 mnuItem(1,"第一项") mnuItem(2,"图片世界") mnuItem(3,"第三个内容") mnuItem(4,"表格") mnuItem(5,"滚动字幕")
//End if(i==1) { span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女
" +"<input>
<input>
<input type=submit>" } if(i==2) { span1.innerHTML="<img src=http://www.fnfnet.com/images/banner.gif width=250>" } if(i==3) { span1.innerHTML="<h1>第三个内容</h1>"} if(i==4) { span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>" +"<tr><td>aaaaaaaa</td></tr>" +"<tr><td>bbbbbbbb</td></tr>" +"<tr><td>ccccccccc</td></tr></table>" } if(i==5) { span1.innerHTML="<marquee>" +"这是第五个内容" +"啦啦..？</marquee>" }
}
function mnuItem(i,con)
{ document.all("MenuName"+i).innerText=con
}
</script>
<style>td{font-size:9pt}
.span{ cursor:default; padding-left:5; padding-top:2; padding-right:5; padding-bottom:0; width:100%; height:100%; }
</style>
<TITLE></TITLE>
<META http-equiv="content-type" content="text/html;charset=gb2312">
</HEAD>
<BODY bgcolor=FFFFFF onload=content(1) onselectstart="return false">
<table width=0 onselectstart="return false" bgcolor=menu align=center><tr><td>
<table cellpadding=0 cellspacing=0 onselectstart="return false"> <tr height=20> <td valign=bottom> <table cellspacing=0 cellpadding=0 bgcolor=menu> <tr> <td width=1 height=1></td><td width=1 height=1></td> <td bgcolor=white></td><td></td><td></td> </tr> <tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td> <td></td><td bgcolor=black></td><td></td> </tr> <tr><td width=1 bgcolor=white></td><td width=1 height=1></td> <td id=btn1 height=20><span class=span id=MenuName1> </span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td> </tr> <tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=menu id=td1></td> </tr> </table> </td> <script>
for(i=2;i<carNum;i++)
{ tdBody="<td valign=bottom>" tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=menu>" tdBody+="<tr>" tdBody+="<td width=1 height=1><\/td><td width=1 height=1><\/td>" tdBody+="<td bgcolor=white><\/td><td></td><td></td>" tdBody+="<\/tr>" tdBody+="<tr><td width=1 height=1><\/td><td width=1 height=1 bgcolor=white><\/td>" tdBody+="<td></td><td bgcolor=black><\/td><td></td>" tdBody+="<\/tr>" tdBody+="<tr><td width=1 bgcolor=white><\/td><td width=1 height=1><\/td>" tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+"> <\/span></td><td width=1 bgcolor=gray><\/td><td bgcolor=black width=1><\/td>" tdBody+="<\/tr>" tdBody+="<tr><td bgcolor=white><\/td><td colspan=4 height=1 bgcolor=white id=td"+i+"><\/td>" tdBody+="<\/tr>" tdBody+="<\/table>" tdBody+="<\/td>";
document.write(tdBody)
}
</script>
</td>
<td style="border-bottom:1 white solid" width=50> </td> </tr>
</table>
<div style="padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset">
<span id=span1></span>
</div>
</td></tr></table>
</BODY>
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

<html>
<head>
<title>window</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type=text/css>
td { font-size: 12px; font-family:arial; 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: #E4EAF8; 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: #E4EAF8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; }
</style>
<script language=javascript>
</script>
</head>
<body> <table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable> <tr height=20 align=center> <td class=sec2 width=10% onclick="secBoard(0)">General Information</td> <td class=sec1 width=10% onclick="secBoard(1)">Team</td> <td class=sec1 width=10% onclick="secBoard(2)">Documentation</td> <td class=sec1 width=10% onclick="secBoard(3)">Test Report</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> text </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align=center valign=top> text1 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align=center valign=top> text2 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align=center valign=top> text3 </td> </tr> </tbody> </table> </body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

多线程的全选复选框 Js中sort()方法的用法

Javascript 中的 一些实用的TAB效果

评论 (0) All

Javascript 中的一些实用的TAB效果