<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="webclientstyle.css">
<style type="text/css">
a
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #000000;
text-decoration: underline;
}
td
{
font-size :9pt;
font-family :Arial, Helvetica, sans-serif;
font-weight :bold;
}
blockquote
{
padding-left :0.5cm;
padding-right :0.5cm;
}
</style><script language="JavaScript" src="dhtml.js"></script>
<script language="Javascript">
var tabid = new Array("General", "Staff", "DataStructures",
"Documentation", "History", "InputContainer"
)
var tabtext = new Array("全部",
"待用",
"运行中",
"未入库",
"检修中",
"报废/失窃/转出"
)
</script><!-- --------------------------------------------- //-->
<!-- ---------- Java String Definitions ---------- //-->
<!-- --------------------------------------------- //--><!-- --------------------------------------------- //-->
<!-- ------- End of Java String Definitions ------ //-->
<!-- --------------------------------------------- //--></head><body onLoad="javascript:initTabedPane(0)">
<!-- --------------------------------------------- //-->
<!-- --------------- Title ----------------------- //-->
<!-- --------------------------------------------- //-->
<div class="title" align="center">设备资产管理</div>
<!-- --------------------------------------------- //-->
<!-- ----- Tab Contexts till End of Code --------- //-->
<!-- --------------------------------------------- //-->
<!----------------- General ---------------------- //-->
<div id="General" class="tabbody">
<br>
<table width="700" style="position: static">
<tr>
<td><input type=checkbox name=All></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>周转状态</td>
<td></td>
<td></td>
</tr>
</table>
<br>
</div>
<!-------------- End of General ------------------- //-->
<!------------------ Staff ------------------------ //-->
<div id="Staff" class="tabbody">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!------------------- End of Staff ---------------- //-->
<!------------------ Data Structures ------------------------ //-->
<div id="DataStructures" class="tabbody">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!------------------- End of Data Structures ---------------- //--><!----------------- Documentation ----------------- //-->
<div id="Documentation" class="tabbody">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!---------------- End of Documentation ----------- //--><!--------------------- History ------------------- //-->
<div id="History" class="tabbody">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!----------------- End of History ---------------- //--><!--------------- Input_Container ----------------- //-->
<div id="InputContainer" class="tabbody" style="width:700px;">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!------------- End of Input Container ------------ //-->
</body></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="webclientstyle.css">
<style type="text/css">
a
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #000000;
text-decoration: underline;
}
td
{
font-size :9pt;
font-family :Arial, Helvetica, sans-serif;
font-weight :bold;
}
blockquote
{
padding-left :0.5cm;
padding-right :0.5cm;
}
</style><script language="JavaScript" src="dhtml.js"></script>
<script language="Javascript">
var tabid = new Array("General", "Staff", "DataStructures",
"Documentation", "History", "InputContainer"
)
var tabtext = new Array("全部",
"待用",
"运行中",
"未入库",
"检修中",
"报废/失窃/转出"
)
</script><!-- --------------------------------------------- //-->
<!-- ---------- Java String Definitions ---------- //-->
<!-- --------------------------------------------- //--><!-- --------------------------------------------- //-->
<!-- ------- End of Java String Definitions ------ //-->
<!-- --------------------------------------------- //--></head><body onLoad="javascript:initTabedPane(0)">
<!-- --------------------------------------------- //-->
<!-- --------------- Title ----------------------- //-->
<!-- --------------------------------------------- //-->
<div class="title" align="center">设备资产管理</div>
<!-- --------------------------------------------- //-->
<!-- ----- Tab Contexts till End of Code --------- //-->
<!-- --------------------------------------------- //-->
<!----------------- General ---------------------- //-->
<div id="General" class="tabbody">
<br>
<table width="700" style="position: static">
<tr>
<td><input type=checkbox name=All></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>周转状态</td>
<td></td>
<td></td>
</tr>
</table>
<br>
</div>
<!-------------- End of General ------------------- //-->
<!------------------ Staff ------------------------ //-->
<div id="Staff" class="tabbody">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!------------------- End of Staff ---------------- //-->
<!------------------ Data Structures ------------------------ //-->
<div id="DataStructures" class="tabbody">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!------------------- End of Data Structures ---------------- //--><!----------------- Documentation ----------------- //-->
<div id="Documentation" class="tabbody">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!---------------- End of Documentation ----------- //--><!--------------------- History ------------------- //-->
<div id="History" class="tabbody">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!----------------- End of History ---------------- //--><!--------------- Input_Container ----------------- //-->
<div id="InputContainer" class="tabbody" style="width:700px;">
<br>
<table width="700">
<tr>
<td></td>
<td>局编号</td>
<td>型号</td>
<td>容量</td>
<td>制造厂</td>
<td>出厂编号</td>
<td>原因</td>
<td>支付日期</td>
<td></td>
</tr>
</table>
<br>
</div>
<!------------- End of Input Container ------------ //-->
</body></html>
body
{
background-color: #C6C6C6;
font-family: Arial, Helvetica, sans-serif;
}.helphead
{
color :#FFFFFF;
background-color:#3163FF;
border-color :#FFFFFF;
border-style :outset;
border-width :0.05cm;
margin-right :-1cm;
}.errormessage
{
background-color:#C6C6C6;
font-size :10pt;
}.navigator
{
background-color: #BBBBBB;
}.oddrow { background-color: #FFFFFF; }
.evenrow { background-color: #CCDDFF; }.informationfield
{
background-color :#C6C6C6;
border-style :inset;
border-color :#DDDDDD;
border-width :0.02cm;
vertical-align :top;
}.title
{
font-family :arial;
font-size :12pt;
font-weight :bold;
margin-left :0.1cm;
}.navigationinfo
{
font-family :sans-serif;
font-size :8pt;
margin-top :-0.4cm;
margin-bottom :-0.1cm;
margin-right :0.1cm;
}.navigationseparator
{
background-color:#C6C6C6;
}.listtable
{
background-color :#D0D0D0;
border-width: 0.05cm;
}
<!------------- Style Sheets for Tabs ------------->.tabie55bug
{
//EF: if this is removed, tabselected no longer works in IE5.5...
}.tabselected
{
background-color :#E0E0E0;
border-style :outset;
border-color :#FFFFFF;
border-width :0.05cm;
border-bottom-width :0cm;
padding-bottom :0.05cm;
padding-top :0cm;
width :95%;
font-size :10pt;
font-family :Arial, Helvetica, sans-serif;
font-weight :bold;
z-index :3;
}.tabunselected
{
background-color :#BBBBBB;
border-style :outset;
border-color :#FFFFFF;
border-width :0.05cm;
border-bottom-width :0cm;
width :95%;
font-size :10pt;
font-family :Arial, Helvetica, sans-serif;
font-weight :bold;
z-index :3;
}.tabbody
{
background-color :#E0E0E0;
position :absolute;
visibility :hidden;
font-family :Arial, Helvetica, sans-serif;
font-size :10pt;
font-weight :bold;
z-index :3;
border-color :#FFFFFF;
border-style :outset;
border-width :0.05cm;
height :50px;
width :300px;
padding-left :0.4cm;
padding-right :0.4cm;
}
//------------------------------------------------------------------------
// determine browser
//------------------------------------------------------------------------function Browser()
{
var b = navigator.appName;
var vi = parseInt(navigator.appVersion); if (b == "Netscape" && vi >= 4) this.isNS = true;
else if (navigator.userAgent.indexOf("Opera") > 0) b = navigator.userAgent;
else if (b == "Microsoft Internet Explorer" && vi >= 4) this.isIE = true; if (!this.isNS && !this.isIE) alert("Browser " + b + " not supported");
}var browser = new Browser();//------------------------------------------------------------------------
// layers...
//------------------------------------------------------------------------// Create a Layer with HTML-Content at Position (x,y) without
// Searching for a <div>-Tag
function createLayer(name, html, left, top) //不通过寻找<div>-Tag创建layer
{
if (browser.isIE)
{
var str = '\n<div id='+name+' style="position:absolute; left:'+left+'; top:'+top+'; width:2pt; height:1pt; visibility:show;z-index=4;">'
str = str + html + '</div>'
document.body.insertAdjacentHTML("BeforeEnd",str)
return getLayer(name)
}
}// Write new HTML-Content into a Layer
function writeIntoLayer(layer, html)
{
if (browser.isIE)
{
layer.innerHTML=html;
}
}// Getting the Width of a Layer
function getWidth(layer)
{
if (browser.isIE)
return(layer.clientWidth);
return(-1);
}// Getting the Height of a Layer
function getHeight(layer)
{
if (browser.isIE)
return(layer.clientHeight);
return(-1);
}// Move Layer at X/Y Position.
function moveLayerTo(layer, x, y)
{
if (browser.isIE)
{
layer.style.left = x;
layer.style.top = y;
}
}// Set the Background Color of a Layer with the specified Color
function setBgColor(layer, color)
{
if (browser.isIE)
layer.style.backgroundColor = color;
}// Function for initialising a certain Layer.
function getLayer(name)
{
if (browser.isIE)
return document.all(name);
return null;
}// Function for initializing a certain Layer (only for NETSCAPE).
// Used by getLayer(name) above.
function findLayer(name, doc)
{
var i, layer;
for (i = 0; i < doc.layers.length; i++)
{
layer = doc.layers[i];
if (layer.name == name)
return layer;
if (layer.document.layers.length > 0)
{
layer = findLayer(name, layer.document);
if (layer != null)
return layer;
}
}
return null;
}// Make a certain Layer visible.
function showLayer(layer) //显示对应的layer
{
if (browser.isIE)
layer.style.visibility = "visible";
}// Make a certain Layer invisible.
function hideLayer(layer) //隐藏目前的layer
{
if (browser.isIE)
layer.style.visibility = "hidden";
}
// ------------------------------------------------------------ //
// ---------------- Functions for Tabed Panes ---------------- //
// ------------------------------------------------------------ ////EF: if this is removed, tabselected no longer works in IE...
//var unselectedHeadIEBug = "";
var unselectedHead = "<span class='tabunselected'><a href=\"javascript:showTab('{_Name_}');\"><nobr> {_Text_} </nobr></a></span>"
var selectedHead = "<span class='tabselected'><nobr> {_Text_} </nobr></span>"var layerHead = new Array()
var layerBody = new Array()var selectedindex = 0
var y_pos = 110
var x_pos = 14
var maxlength = 20 //Max. Length of a Tab//Initialisation of the Tabed Pane
function initTabedPane(index)
{
var x = x_pos for (var i = 0; i < tabtext.length; i++) //数组(全部。)
{
var headcontent = unselectedHead
headcontent = headcontent.replace("{_Name_}", tabid[i])
headcontent = headcontent.replace("{_Text_}", tabtext[i].replace(/ /g, " ")) layerHead[i] = createLayer("Head"+i, headcontent, x, y_pos) x += getWidth(layerHead[i])
layerBody[i] = getLayer(tabid[i])
moveLayerTo(layerBody[i], x_pos, y_pos+getHeight(layerHead[0]))
maxlength = ( getHeight(layerBody[i])>maxlength ) ? getHeight(layerBody[i]) : maxlength
} //Correct the scrollable Screen Height
if (browser.isIE)
var resizelayer = createLayer("big","<br>",x,y_pos+getHeight(layerHead[0])+maxlength+10) //Set Index of selected Tab
selectedindex = index;
showTab(tabid[selectedindex]) //显示"全部"页面的标签
}//Change of selected Tab
function showTab(id) //根据所选的标签显示对应的页面
{
for (var ndx = 0; ndx < tabid.length; ++ndx)
if (tabid[ndx] == id)
break; // Show selected Tab.
hideLayer(layerBody[selectedindex]) //function
showLayer(layerBody[ndx]) //function // Show colored Tab Head of selected Tab.
var html = unselectedHead
html = html.replace("{_Name_}", tabid[selectedindex])
html = html.replace("{_Text_}", tabtext[selectedindex].replace(/ /g, " ")) writeIntoLayer( layerHead[selectedindex], html ) html = selectedHead
html = html.replace("{_Text_}", tabtext[ndx].replace(/ /g, " ")) writeIntoLayer( layerHead[ndx], html ) selectedindex = ndx
}
原因就是.tabbody
{
background-color :#E0E0E0;
position :absolute; 这里的问题
visibility :hidden;
font-family :Arial, Helvetica, sans-serif;
font-size :10pt;
font-weight :bold;
z-index :3;
border-color :#FFFFFF;
border-style :outset;
border-width :0.05cm;
height :50px;
width :300px;
padding-left :0.4cm;
padding-right :0.4cm;
}只要把按钮的style设成绝对定位,高度在列表下就可以了
css加一个
.button
{
position:absolute;
top:300;}button使用<input type=button name="test" value="test" class="button">