TabPane 选项卡

最新推荐文章于 2023-01-12 10:37:21 发布

sugar88

最新推荐文章于 2023-01-12 10:37:21 发布

阅读量6.2k

点赞数

分类专栏： Web Designs 文章标签： table function class menu javascript border

本文链接：https://blog.csdn.net/sugar88/article/details/496294

版权

Web Designs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1，这个例子是使用innerHTML来做选项卡，内容多了，写就麻烦了

<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.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 οnlοad=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>

2，记得Juven老哥提供了一个JavaScript写的的TabPane组件，感兴趣的这里下载

效果图如下：
如图片显示不完整请点击查看

3，很多情况见到的是采用Table+CSS来实现的了。

4，CSS中的滑动门技术

http://www.w3cn.org/article/translate/2005/112.html

sugar88

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TabPane 选项卡

1，这个例子是使用innerHTML来做选项卡，内容多了，写就麻烦了 var Num=4; //这里是增加选项卡的数目var carNum=2+Numfunction document.onselectstart(){var obj=event.srcElement if(obj.tagName=="SPAN"){return false;}}function document.onmousedo
复制链接

扫一扫