分享
 
 
 

使用innerHTML来做选项卡特效实例

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

<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://www.knowsky.com/images/logo.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">

<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>

</BODY>

</HTML>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有