仿windows选项卡效果连载2-网页设计频道-中国IT实验室-技术·资讯·教育·服务·社区

首页 | 互联网 | IT动态 | Cisco | Windows | Linux | Java | .Net | Oracle | 华为 | 存储世界 | 服务器 | 网络设备 | IDC | 安全 | 求职招聘
IT培训 | 数字网校 | 技术专题 | 电子书下载 | 教学视频 | 网页设计 | 平面设计 | 解决方案 | 直播室 | 虚拟考场 | 搜索 | 博客 | 沙龙 | 论坛




网页设计
Dreamweaver \| Flash

Fireworks　 \| Frontpage

HTML/CSS　　\| Javascript


平面设计
Photoshop　 \| CorelDraw

AuotoCAD 　 \| Illustrator

Freehand


多媒体
3DMax　　　 \| Authorware

Director 　 \| Maya


工具软件
PP点点通 \| 迅雷 \| BT

eMule \| FlashGet \| Nero

Ghost \| Outlook \| IE

Maxthon \| Office


即时通讯
QQ \| MSN \| 网易泡泡

Skype \| 雅虎通 \| 新浪UC

最新文章

您现在的位置：中国IT实验室 >> 网页设计 >> Dreamweaver >> Dreamweaver技巧教程 >> 文章正文

仿windows选项卡效果连载2

中国设计秀cnwebshow.com　

2008-1-17　

佚名　

保存本文　

推荐给好友　

收藏本站

◆ 网页平面多媒体培训、认证考试免费咨询热线:400-700-5807 进入网络咨询平台 ◆

点击下面的运行，可预览代码效果:

<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>女<br>" 
+"<input><br><input><br><input type=submit>" 
} 
if(i==2) 
{ 
span1.innerHTML="<img src=http://webdesign.chinaitlab.com/UploadFiles_8014/200801/20080117141017261.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=utf-8"> 
</HEAD> 
<BODY bgcolor=FFFFFF onload=content(1) onselectstart="return false"> 
<p> 
<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>

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

【责编:Luzi】

　　相关产品与培训

相关文章		推荐文章

HTML和CSS在Flash中的应用如何去除点击链接时出现的虚线框 CSS控制输入框input悬停交互样式仿windows选项卡效果连载1 一个div里面图片垂直居中的例子符合web标准的跟随滚动条运动网页设计中关键词高亮显示 CSS实现始终在页面底部的层效果 css学习者，2008不要太浮燥个人网站真能转成商业网站，你能么？

文章评论

精彩友情推荐

华为网管交换机			IDC资讯大全
华为以太网交换机			机房品质万里行
华为交换机最新报价			IDC托管必备知识
华为千兆光纤交换机			全国IDC报价
华为千兆交换机			网站推广优化