给你代码图片没法给了 共3个文件--------------------------------------------
tab.htm
--------------------------------------------<script src="tabclass.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
var tabbox1=new TabBox("tab1")
tabbox1.addtab("p1","留言",0)
tabbox1.addtab("p2","附件")
tabbox1.addtab("p3","关于此控件")
</script><body bgcolor="#AEAEAE">
<table border="0" style="border-collapse: collapse" bordercolor="#808080" cellpadding="0" >
<tr><td>
<script>
tabbox1.init()
</script>
</td>
</tr>
<tr width="300"><td bgcolor="#FFFFFF" style="border:1px #000000 solid;border-top:none" nowrap>
<table id=p1><tr><td>
<textarea rows="6" name="S1" cols="51"></textarea></td></tr></table>
<table id=p2><tr><td><input type=file ></td></tr></table>
<table id=p3><tr><td>此控件由<b><font face="Verdana"><font color="#FF0000">puter</font>jam</font></b>独立开发<br>如果你在使用过程中有什么意见和建议,请到 <a href="http://puterjam.vipx.net/" target=_blank>puterjam.vipx.net</a> </td></tr></table>
</td></tr>
<script>tabbox1.inithidetab()</script>
</table>
</body>
--------------------------------------------
tabclass.js
--------------------------------------------function TabBox(tabname,type){
var tabbox=this;
this.tabname=tabname;
this.lasttab=1;
this.tabarray=new Array()
this.tabPad=null;//----保存tab项目数祖----
this.item=function(tabid,caption,dis){
this.tabid=tabid
this.caption=caption
this.dis=dis
}//----添加tab项目----
this.addtab=function(tabid,caption,dis){
//alert(tabbox.tabarray.length)
tabbox.tabarray[tabbox.tabarray.length]=new tabbox.item(tabid,caption,dis)
}//--程序初试化----
this.init=function(){
//alert(tabbox.tabname)
if (tabbox.tabarray.length==0) {alert("没有任何项目");return}
document.write("<div id='"+tabbox.tabname+"div'>")
tabbox.tabPad=eval("document.all."+tabbox.tabname+"div")
var tbBoard=document.createElement("table")
tabbox.tabPad.insertAdjacentElement("beforeEnd",tbBoard);
tbBoard.style.cssText="border-collapse: collapse"
tbBoard.border="0"
tbBoard.cellSpacing="0"
tbBoard.cellPadding="0"
tbBoard.height="24"
tbBoard.width="100%"
trRow = tbBoard.insertRow(0)
trRow.height="3"
var tl=0
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabbar1'
tbCell.rowSpan="2"
tbCell.className="tbottom3"
tbCell.width="3"
tbCell.noWrap=true
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabtop1'
tbCell.noWrap=true
for (i=1;i<tabbox.tabarray.length;i++)
{
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabbar'+(i+1)
tbCell.rowSpan="2"
tbCell.className="tbottom"
tbCell.width="3"
tbCell.noWrap=true
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabtop'+(i+1)
tbCell.noWrap=true
}
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabbar'+(tabbox.tabarray.length+1)
tbCell.rowSpan="2"
tbCell.className="tbottom2"
tbCell.width="3"
tbCell.noWrap=true
tl++
tbCell=trRow.insertCell(tl)
tbCell.rowSpan="2"
tbCell.width="100%"
tbCell.noWrap=true
tbCell.style.cssText="border-bottom:1px #000000 solid;"
//alert(tbBoard.cells.length)
trRow = tbBoard.insertRow(1)
for (i=0;i<tabbox.tabarray.length;i++)
{ tbCell=trRow.insertCell(i)
tbCell.id=tabbox.tabname+'_tabcon'+(i+1)
tbCell.className="lostfouce"
if (tabbox.tabarray[i].dis==1)
{
tbCell.innerHTML="<b>"+tabbox.tabarray[i].caption+" "+"</b>"
}
else
{
tbCell.innerHTML=tabbox.tabarray[i].caption+" "
}
tbCell.tabnum=i+1
tbCell.noWrap=true
tbCell.onclick=function()
{
tabbox.doclick(this.tabnum)
}
tbCell.onmouseover=function()
{
}
tbCell.onmouseout=function()
{
tabbox.doout(this)
}
}
}this.inithidetab=function(num)
{ for (i=0;i<tabbox.tabarray.length;i++)
{
eval(tabbox.tabarray[i].tabid).style.display="none"
}
tabbox.doclick(1)
}
this.doclick=function(num,action){
lastbar1=eval(tabbox.tabname+"_tabbar"+this.lasttab)
nlasttab=this.lasttab+1
lastbar2=eval(tabbox.tabname+"_tabbar"+nlasttab)tpbar1=eval(tabbox.tabname+"_tabbar"+1)
tpbar2=eval(tabbox.tabname+"_tabbar"+(tabbox.tabarray.length+1))tabtop=eval(tabbox.tabname+"_tabtop"+this.lasttab)
tabcon=eval(tabbox.tabname+"_tabcon"+this.lasttab)
tabtop.className=""
tabcon.className="lostfouce"
//alert(lastbar2.className)
lastbar1.className='tbottom';
lastbar2.className='tbottom';
tpbar1.className='tbottom3';
tpbar2.className='tbottom2';
eval(tabbox.tabarray[this.lasttab-1].tabid).style.display="none"
lastbar1=eval(tabbox.tabname+"_tabbar"+num)
nnum=num+1
lastbar2=eval(tabbox.tabname+"_tabbar"+nnum)
tabtop=eval(tabbox.tabname+"_tabtop"+num)
tabcon=eval(tabbox.tabname+"_tabcon"+num)
lastbar1.className='tleft';
lastbar2.className='tright';
tabtop.className="ttop"
tabcon.className="getfouce"
//alert(tabbox.tabarray[num-1].tabid)
eval(tabbox.tabarray[num-1].tabid).style.display="block" this.lasttab=num;
}
this.doover=function(obj){
if (obj.className=="lostfouce")
{
obj.className="lostfouce_over"
}}this.doout=function(obj){
if (obj.className=="lostfouce_over")
{
obj.className="lostfouce"
}}
}--------------------------------------------
style.css
--------------------------------------------
body
{
margin: 6pt;
s}td
{
font-family: 宋体;
font-size: 12px;
color: #000000;
}.bd
{
FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3);
}
.tleft
{
background-image: url('../img/tab1.gif');
}
.tright
{
background-image: url('../img/tab3.gif');
}
.ttop
{
background-image: url('../img/tab2.gif');
}
.ttop_over
{
background-image: url('../img/tab8.gif');
}
.tbottom
{
background-image: url('../img/tab4.gif');
}
.tbottom2
{
background-image: url('../img/tab6.gif');
}
.tbottom3
{
background-image: url('../img/tab7.gif');
border-bottom: 1px #000000 solid;
}
.getfouce
{
cursor: default;
text-indent: 6px;
font-size: 12px;
background-color: #ffffff;
color:#000000;
FONT-FAMILY: "宋体";
font-weight:bold
}
.lostfouce
{
text-indent: 6px;
font-size: 12px;
background-image: url('../img/tab5.gif');
border-bottom: 1px #000000 solid;
cursor: hand;
color:#555555;
FONT-FAMILY: "宋体";
padding-top:4px
}
.lostfouce_over
{
text-indent: 6px;
font-size: 12px;
cursor: hand;
background-image: url('../img/tab9.gif');
border-bottom: 1px #000000 solid;
}
tab.htm
--------------------------------------------<script src="tabclass.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
var tabbox1=new TabBox("tab1")
tabbox1.addtab("p1","留言",0)
tabbox1.addtab("p2","附件")
tabbox1.addtab("p3","关于此控件")
</script><body bgcolor="#AEAEAE">
<table border="0" style="border-collapse: collapse" bordercolor="#808080" cellpadding="0" >
<tr><td>
<script>
tabbox1.init()
</script>
</td>
</tr>
<tr width="300"><td bgcolor="#FFFFFF" style="border:1px #000000 solid;border-top:none" nowrap>
<table id=p1><tr><td>
<textarea rows="6" name="S1" cols="51"></textarea></td></tr></table>
<table id=p2><tr><td><input type=file ></td></tr></table>
<table id=p3><tr><td>此控件由<b><font face="Verdana"><font color="#FF0000">puter</font>jam</font></b>独立开发<br>如果你在使用过程中有什么意见和建议,请到 <a href="http://puterjam.vipx.net/" target=_blank>puterjam.vipx.net</a> </td></tr></table>
</td></tr>
<script>tabbox1.inithidetab()</script>
</table>
</body>
--------------------------------------------
tabclass.js
--------------------------------------------function TabBox(tabname,type){
var tabbox=this;
this.tabname=tabname;
this.lasttab=1;
this.tabarray=new Array()
this.tabPad=null;//----保存tab项目数祖----
this.item=function(tabid,caption,dis){
this.tabid=tabid
this.caption=caption
this.dis=dis
}//----添加tab项目----
this.addtab=function(tabid,caption,dis){
//alert(tabbox.tabarray.length)
tabbox.tabarray[tabbox.tabarray.length]=new tabbox.item(tabid,caption,dis)
}//--程序初试化----
this.init=function(){
//alert(tabbox.tabname)
if (tabbox.tabarray.length==0) {alert("没有任何项目");return}
document.write("<div id='"+tabbox.tabname+"div'>")
tabbox.tabPad=eval("document.all."+tabbox.tabname+"div")
var tbBoard=document.createElement("table")
tabbox.tabPad.insertAdjacentElement("beforeEnd",tbBoard);
tbBoard.style.cssText="border-collapse: collapse"
tbBoard.border="0"
tbBoard.cellSpacing="0"
tbBoard.cellPadding="0"
tbBoard.height="24"
tbBoard.width="100%"
trRow = tbBoard.insertRow(0)
trRow.height="3"
var tl=0
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabbar1'
tbCell.rowSpan="2"
tbCell.className="tbottom3"
tbCell.width="3"
tbCell.noWrap=true
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabtop1'
tbCell.noWrap=true
for (i=1;i<tabbox.tabarray.length;i++)
{
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabbar'+(i+1)
tbCell.rowSpan="2"
tbCell.className="tbottom"
tbCell.width="3"
tbCell.noWrap=true
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabtop'+(i+1)
tbCell.noWrap=true
}
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+'_tabbar'+(tabbox.tabarray.length+1)
tbCell.rowSpan="2"
tbCell.className="tbottom2"
tbCell.width="3"
tbCell.noWrap=true
tl++
tbCell=trRow.insertCell(tl)
tbCell.rowSpan="2"
tbCell.width="100%"
tbCell.noWrap=true
tbCell.style.cssText="border-bottom:1px #000000 solid;"
//alert(tbBoard.cells.length)
trRow = tbBoard.insertRow(1)
for (i=0;i<tabbox.tabarray.length;i++)
{ tbCell=trRow.insertCell(i)
tbCell.id=tabbox.tabname+'_tabcon'+(i+1)
tbCell.className="lostfouce"
if (tabbox.tabarray[i].dis==1)
{
tbCell.innerHTML="<b>"+tabbox.tabarray[i].caption+" "+"</b>"
}
else
{
tbCell.innerHTML=tabbox.tabarray[i].caption+" "
}
tbCell.tabnum=i+1
tbCell.noWrap=true
tbCell.onclick=function()
{
tabbox.doclick(this.tabnum)
}
tbCell.onmouseover=function()
{
}
tbCell.onmouseout=function()
{
tabbox.doout(this)
}
}
}this.inithidetab=function(num)
{ for (i=0;i<tabbox.tabarray.length;i++)
{
eval(tabbox.tabarray[i].tabid).style.display="none"
}
tabbox.doclick(1)
}
this.doclick=function(num,action){
lastbar1=eval(tabbox.tabname+"_tabbar"+this.lasttab)
nlasttab=this.lasttab+1
lastbar2=eval(tabbox.tabname+"_tabbar"+nlasttab)tpbar1=eval(tabbox.tabname+"_tabbar"+1)
tpbar2=eval(tabbox.tabname+"_tabbar"+(tabbox.tabarray.length+1))tabtop=eval(tabbox.tabname+"_tabtop"+this.lasttab)
tabcon=eval(tabbox.tabname+"_tabcon"+this.lasttab)
tabtop.className=""
tabcon.className="lostfouce"
//alert(lastbar2.className)
lastbar1.className='tbottom';
lastbar2.className='tbottom';
tpbar1.className='tbottom3';
tpbar2.className='tbottom2';
eval(tabbox.tabarray[this.lasttab-1].tabid).style.display="none"
lastbar1=eval(tabbox.tabname+"_tabbar"+num)
nnum=num+1
lastbar2=eval(tabbox.tabname+"_tabbar"+nnum)
tabtop=eval(tabbox.tabname+"_tabtop"+num)
tabcon=eval(tabbox.tabname+"_tabcon"+num)
lastbar1.className='tleft';
lastbar2.className='tright';
tabtop.className="ttop"
tabcon.className="getfouce"
//alert(tabbox.tabarray[num-1].tabid)
eval(tabbox.tabarray[num-1].tabid).style.display="block" this.lasttab=num;
}
this.doover=function(obj){
if (obj.className=="lostfouce")
{
obj.className="lostfouce_over"
}}this.doout=function(obj){
if (obj.className=="lostfouce_over")
{
obj.className="lostfouce"
}}
}--------------------------------------------
style.css
--------------------------------------------
body
{
margin: 6pt;
s}td
{
font-family: 宋体;
font-size: 12px;
color: #000000;
}.bd
{
FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3);
}
.tleft
{
background-image: url('../img/tab1.gif');
}
.tright
{
background-image: url('../img/tab3.gif');
}
.ttop
{
background-image: url('../img/tab2.gif');
}
.ttop_over
{
background-image: url('../img/tab8.gif');
}
.tbottom
{
background-image: url('../img/tab4.gif');
}
.tbottom2
{
background-image: url('../img/tab6.gif');
}
.tbottom3
{
background-image: url('../img/tab7.gif');
border-bottom: 1px #000000 solid;
}
.getfouce
{
cursor: default;
text-indent: 6px;
font-size: 12px;
background-color: #ffffff;
color:#000000;
FONT-FAMILY: "宋体";
font-weight:bold
}
.lostfouce
{
text-indent: 6px;
font-size: 12px;
background-image: url('../img/tab5.gif');
border-bottom: 1px #000000 solid;
cursor: hand;
color:#555555;
FONT-FAMILY: "宋体";
padding-top:4px
}
.lostfouce_over
{
text-indent: 6px;
font-size: 12px;
cursor: hand;
background-image: url('../img/tab9.gif');
border-bottom: 1px #000000 solid;
}
解决方案 »
- 鼠标移到图片上显示 “播放,收藏”
- 小弟弟一次来这个板块,希望大家以后多多照顾,随便给小弟一些JavaScript的初级学习资料。
- 问个简单的js?
- js怎么获取asc码
- 探讨Google talk web 版的即时聊天工具
- 关于浮动图标
- 我的想法,请教一下怎么实现!谢谢
- ■■请教各位:写一个js函数,设置选中ListBox的给定值,参数为ListBox的id和给定值,看如下:■■
- 请问我要在使打开的新窗口执行一个新的文件。请问如何实现。我想实现的功能如下。请高手指点
- 用asp编写对个聊天室,用户纪录和聊天纪录怎么存放好。
- 求页面内输入框,当输入关键字时,自动把关键字用特殊颜色显示的代码
- 大哥们帮忙,跪求execCommand("AbsolutePosition",false,true)如何用的?
<head>
<title>DD tab menu</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script type="text/javascript">//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes////////Stop editting////////////////var previoustab=""if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}function do_onload(){
collecttablinks()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload</script>
</head>
<body>
<ul id="tablist">
<li><a href="#" onclick="expandcontent('sc1', this)">?工信息</a></li>
<li><a href="#" onclick="expandcontent('sc2', this)">基本?料</a></li>
<li><a href="#" onclick="expandcontent('sc3', this)">???料</a></li>
<li><a href="#" onclick="expandcontent('sc4', this)">?注信息</a></li>
</ul><DIV id="tabcontentcontainer"><div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
<a href="http://www.dynamicdrive.com/dynamicindex1/ ">Menu and Navigation</a> | <a href="http://www.dynamicdrive.com/dynamicindex2/">Scrollers</a> | <a href="http://www.dynamicdrive.com/dynamicindex16/"> | <a href="http://www.dynamicdrive.com/dynamicindex16/">Links & tooltips</a> | <a href="http://www.dynamicdrive.com/dynamicindex14/">Image Slideshows</a>
</div><div id="sc2" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a> | <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a> | <a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS tutorials</a>
</div><div id="sc3" class="tabcontent">
Web Coding and discussions forum. Visit <a href="http://www.codingforums.com">Coding Forums</a> for help on JavaScript, CSS, PHP, XML, and more.
</div><div id="sc4" class="tabcontent">
<a href="http://www.webmasterpick.com">Webmaster Pick</a> features free and useful webmaster resources. Check out their useful <a href="http://www.webmasterpick.com/gifoptimize/">Gif Optimizer</a>.
</div>
</DIV>
</body>
</html>