一些實用的TAB效果第1/2頁

2019-11-21 02:28:46

字體：大中小

供稿：網(wǎng)友

<HTML><HEAD><TITLE>無標題文檔</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><META HTTP-EQUIV="imagetoolbar" CONTENT="no"> <STYLE TYPE="text/css"> a, a:link{text-decoration: none; color:#000000; font-size:9pt;}    a:visited{text-decoration: none; color:#000000;}    a:hover{text-decoration: underline; color:red;} BODY, TD, Select{FONT-SIZE:9pt; FONT-FAMILY:"宋體";} #TabStrip {width:500px;background-color:#66CCFF;padding:10px;} #TabStrip #TabCard{width:90%;margin:0px;list-style-type: none;} #TabStrip #TabCard LI {     float:left;     width:100px;     height:20px;     padding-top:4px;     border:1px #7d7d7d solid;     border-bottom:none;     background-color:#CCC;     text-align:center;     cursor:default;     position:relative;     margin:1px; } #TabStrip #TabBody DIV{     display:none;     border:1px #7d7d7d solid;     background-color:#FFF;     width:100%;     height:400px;     padding:5px;     margin-left:2px; } </STYLE> <script language="javascript" type="text/JavaScript">     function getIE(obj){         var t=obj.offsetTop - obj.parentElement.scrollTop;         var l=obj.offsetLeft - obj.parentElement.scrollLeft;         while(obj=obj.offsetParent){             t+=obj.offsetTop - obj.parentElement.scrollTop;             l+=obj.offsetLeft - obj.parentElement.scrollLeft;         }         return {top: t, left:l}     };     function create_div(){         var div = document.createElement('div');         var b    = document.createElement('b');         with(div.style){position = 'absolute';zIndex = '99999';borderTop='1px #FFF solid';width ='98px';height = '1px';pixelTop = '-100';pixelLeft = '-100';}         div.id='_CARD_HR_';         div.appendChild(b);         document.body.insertAdjacentElement('afterBegin', div);     };     function set_tab_card(TabIndex){         var tab = document.getElementById('TabCard');         var bod = document.getElementById('TabBody');         var car = (typeof(TabIndex) != 'object')?tab.children[TabIndex]:TabIndex;         var X_Y = getIE(car);         if(typeof(_CARD_HR_) == 'undefined')create_div();         _CARD_HR_.style.pixelTop = X_Y.top+20;         _CARD_HR_.style.pixelLeft = X_Y.left+1;         for(var i=0; i < tab.children.length; i++){             tab.children[i].style.backgroundColor = (tab.children[i] == car)?'#FFF':'#CCC';             bod.children[i].style.display = (tab.children[i] == car)?'block':'none';         }     }; </script> </HEAD> <BODY onload="set_tab_card(0);" bgcolor="#FFFFFF" text="#000000" leftmargin="20" topmargin="20"> <div   class="iwvjtn8m0"   id="TabStrip">     <UL id="TabCard">         <LI onclick="set_tab_card(this);">用戶管理</LI>         <LI onclick="set_tab_card(this);">用戶組管理</LI>         <LI onclick="set_tab_card(this);">用戶組管理1</LI>     </UL>     <div   class="iwvjtn8m0"   id="TabBody">         <DIV>測丶式1</DIV>         <DIV>測丶式2</DIV>         <DIV>測丶式3</DIV>     </DIV> </DIV> </BODY> </HTML>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

<html> <head> <title>項目申報</title> <STYLE type="text/css"> body,td{     font-size:12px;     color:#000000;     background-color:threedface;     vertical-align: middle; } .checkbox{width:12px;height:12px;} .cked{     margin:0px;padding:0px;width:100%;display:block;background-color:highlight;color:highlighttext; } .nock{     margin:0px;padding:0px;width:100%;display:block; } .tab    {             cursor:hand;             border-top:solid thin white;             border-right:solid thin gray;             border-left:solid thin threedface;             font-family:Verdana;             font-size:10pt;             text-align:center;             font-weight:normal} .selTab    {    border-left:solid thin white;             border-top:solid thin white;             border-right:solid thin gray;             font-size:10pt;             font-weight:bold;             text-align:center} .td_no_bottom {             width:100%;             height:100%;             border-color:white;             border-bottom:0} .td_top_right {             width:100%;             height:100%;             border-color:white;             border-bottom:0;             border-left:0} .td_no_left {             width:100%;             height:100%;             border-color:white;             border-left:0} .td_all {             width:100%;             height:100%;             border-color:white} .title {             font-size:16px;             font-weight:bold;}  .tips {              background-color:transparent;             border:0;              color:#990000;             font-size:14px;} </STYLE> <script LANGUAGE="JavaScript"> var menuItem=['1、申報基本信息','2、省技術(shù)創(chuàng)新項目申請表','3、技術(shù)創(chuàng)新項目立項建議書封面','4、項目開發(fā)的目的、意義及必要性','5、國際水平、現(xiàn)狀及發(fā)展趨勢','6、國內(nèi)產(chǎn)品與技術(shù)發(fā)展水平、現(xiàn)狀','7、項目前期研發(fā)及技術(shù)準備情況','8、項目產(chǎn)業(yè)化實施方案','9、項目進度安排與完成期限','10、技術(shù)經(jīng)濟指標','11、項目資金安排情況','12、進口設(shè)備儀器情況','13、社會、經(jīng)濟效益評價','14、項目承擔(dān)單位及項目協(xié)作單位情況','15、其它需要說明的問題','格式及填寫說明']; var linkItem=['1.jsp','2.jsp','3.jsp','4.jsp','5.jsp','6.jsp','7.jsp','8.jsp','9.jsp','10.jsp','11.jsp','12.jsp','13.jsp','14.jsp','15.jsp','16.jsp']; var col=0; function init(c) {     if(isNaN(c)) col=0;     else col=Math.floor(c);     win.innerHTML=public_Labels(menuItem);     document.body.onclick=changeTabs;     window.onresize=function(){win.innerHTML=public_Labels(menuItem);} }     function public_Labels(labels) {     var html="";     var menus=[];     var menu="";     var base="";     var bases=[];     var row=0;     var row_all=1;     var j=0;     var menu_len=0;     var frame_height=0;     menus[0]='</table><table width=100% CELLPADDING=/"0/" CELLSPACING=/"0/"><tr HEIGHT=/"20/">';     bases[0]='';     for(var i=0;i<labels.length;i++)     {         menu_len+=labels[i].length;         if(menu_len*22>document.body.scrollWidth)          {             j++;             menus[j]="</table><table width=100% CELLPADDING=/"0/" CELLSPACING=/"0/"><tr HEIGHT=/"20/">";             bases[j]="";             menu_len=0;             row_all++;         }         if(i==col)         {             menus[j]+="<td ID=/"t"+i+"/" CLASS=/"selTab/">"+labels[i]+"<//td>";             bases[j]+="<td ID=/"t"+i+"base/" STYLE=/"height:2; border-left:solid thin white/"><//td>";             row=row_all-1;         }         else         {             menus[j]+="<td ID=/"t"+i+"/" CLASS=/"tab/">"+labels[i]+"<//td>";             bases[j]+="<td ID=/"t"+i+"base/" STYLE=/"height:2; background-color:white/"><//td>";         }     }     for(var i=0;i<row_all;i++)     {         if(i!=row) menu+=menus[i]+"/n";     }     menu+=menus[row];     base=bases[row];     frame_height=document.body.scrollHeight-row_all*22; //    alert(document.body.scrollHeight);     html+=("<table STYLE=/"width:100%; height:100%/" CELLPADDING=/"0/" CELLSPACING=/"0/" bgcolor=/"#d4d0c7/">");     html+=( menu );     html+=("  <tr>");     html+=( base );     html+=("  <//tr>");     html+=("<//table>");     html+=("<table width=/"100%/" HEIGHT=/""+frame_height+"/" CELLPADDING=/"0/" CELLSPACING=/"0/">");     html+=("  <tr>");     html+=("    <td STYLE=/"border-left:solid thin white;border-bottom:solid thin white;border-right:solid thin white/">");     html+=("    <iframe frameborder=0 width='100%' height='100%' src='"+linkItem[col]+"'></iframe>");     html+=("    <//td>");     html+=("  <//tr>");     html+=("<//table>");     return html; } function changeTabs() {     if(window.event.srcElement.className == "tab")     {         col=window.event.srcElement.id.replace(/t/i,'');         win.innerHTML=public_Labels(menuItem);     } } </script> </head> <body onload="init()"> <div   class="iwvjtn8m0"   id="win" STYLE="position:absolute; top:0; left:10; height:100%; width:100%; border:none thin gray"> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

12 下一頁閱讀全文

上一篇：Js中sort()方法的用法

下一篇：多線程的全選復(fù)選框