TabPane 选项卡 模拟

转载 2006年06月17日 09:17:00
<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 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>

用html+css+js实现选项卡切换效果

用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果:http://blog.csdn.net/tlonline/article...
  • klp098
  • klp098
  • 2016年03月29日 20:06
  • 1843

使用javascript实现简单的选项卡切换效果

选项卡页面时JS中十分重要的实现方式,其中所运用到的思想在JS中运用广泛,主要包括for循环以及函数的形参和函数的自定义属性的运用。                静态页面以及样式如下:  ...
  • ajiblog
  • ajiblog
  • 2016年01月14日 23:04
  • 506

参数传递模拟TAB选项卡功能

参数传递模拟TAB选项卡功能
  • netuser1937
  • netuser1937
  • 2017年02月10日 13:14
  • 348

mui选项卡跳转问题

1.mui预加载跳转 首页 持仓 我的 //mui初始化 mui.init({ swipeBack: true //启用右滑...
  • webZRH
  • webZRH
  • 2017年06月23日 09:04
  • 1496

利用JavaFx开发RIA桌面应用-TabPane控件使用

TabPane很容易与BorderPane、GridPane混淆,把TabPane理解为布局,实际上TabPane是控件的一种。...
  • loongshawn
  • loongshawn
  • 2016年12月21日 00:15
  • 2986

DIV模拟TAB选项卡

DIV模拟TAB选项卡
  • netuser1937
  • netuser1937
  • 2017年02月09日 08:43
  • 190

京东轮播:选项卡里套选项卡

  • super_yang_android
  • super_yang_android
  • 2017年01月11日 23:42
  • 279

微信小程序开发之选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.ind...
  • sinat_17775997
  • sinat_17775997
  • 2016年12月12日 17:21
  • 1895

Android ViewPager+Fragment滑动选项卡,tab点击选项卡

有一段时间一直再研究这个,自Android 3.0以后,很少开发者再用以前的TabWidget控件了。那种效果不是很好,也不能滑动。后来陆续出现了各种各样滑动选项卡,每种的出现都各有优势吧。但我还是推...
  • qq_16064871
  • qq_16064871
  • 2015年05月23日 08:29
  • 8181

javascript实现选项卡切换效果

javascript实现选项卡切换效果
  • u014610047
  • u014610047
  • 2016年02月19日 14:00
  • 1220
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TabPane 选项卡 模拟
举报原因:
原因补充:

(最多只允许输入30个字)