tableTAB效果

最新推荐文章于 2024-09-11 10:21:17 发布
最新推荐文章于 2024-09-11 10:21:17 发布
阅读量978 收藏
点赞数
分类专栏： javascript 文章标签： html table function menu class javascript
< HTML >
< HEAD >
< script >
var Num=4;  //
< HTML >
< HEAD >
< script  language ="JavaScript1.2" >
// All Codez Modifed & Writen By Windy_sk,
// You Can Use It Freely , But You Must Hold This Item !

var Card_list = new Array();

function Cardz(title,content) {
this.title = title;
this.content = content;
}

//You can add the url list you wanted, format as below;

Card_list[0] = new Cardz("表单","<form action=''>性别：<input type=radio checked name=sex>男<input name='sex' type=radio>女<br>姓名：<input name='name'><br>工作：<select name='job'><option>待业</option><option>在学</option><option>工作</option></select><br><input type=submit><form>");
Card_list[1] = new Cardz("图片","<img src=http://www.agriffchina.com/pic/banner1.gif width=350 height=60>");
Card_list[2] = new Cardz("iFrame","<iframe style='filter:flipV()' src='http://www.sina.com.cn' width=400 height=90% marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=1></iframe>");
Card_list[3] = new Cardz("表格","<table border=1 width=100%><td>表格</td></tr><tr><td>111111111111</td></tr><tr><td>222222222222</td></tr></table>");
Card_list[4] = new Cardz("滚动字幕","<marquee> 滚动字幕 </marquee>");

var Num = Card_list.length;
var cur_card = 1;

function document.onmousedown(){
var obj=event.srcElement
var pobj=obj.parentElement.id;
if(obj.className=="span"){
for(i=1;i<=Num+1;i++){

if(pobj==("btn"+i)){
document.all("td"+i).style.backgroundColor = "menu";
document.all("btn"+i).style.height = 20;
if(i!=cur_card)content(i)
cur_card = i;
}else{
if(i<=Num){
document.all("td"+i).style.backgroundColor = "white";
document.all("btn"+i).style.height = 18;
}
}
}
} 
}


function content(i){
Content.innerHTML = Card_list[i-1].content
}

function init(){
for(i=1;i<=Num;i++)
document.all("MenuName"+i).innerText = Card_list[i-1].title;
content(1);
}

 </ script >

< style >
td{font-size:9pt}
.span{
cursor:default;
padding-left:5;
padding-top:2;
padding-right:5;
padding-bottom:0;
width:70px;
height:100%;
TEXT-ALIGN: center;
}
 </ style >
< TITLE > Table_Card </ TITLE >
< META  http-equiv ="content-type"  content ="text/html;charset=gb2312" >
</ HEAD >
< BODY  bgcolor =#FFFFFF  onload =init() >
< p >
< table  width =0  align =center >< tr >< td >
< table  cellpadding =0  cellspacing =0 >
  < tr  height =20  onselectstart ="return false" >
< script  language ="JavaScript1.2" >
for(i=1;i<=Num;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+">title</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)
}
document.all("td1").style.backgroundColor = "menu";
document.all("btn1").style.height = 20;
 </ script >
< td  style ="border-bottom:1 white solid"  width ="50" ></ td >
  </ tr >
</ table >
< div  style ="BACKGROUND-COLOR: menu;padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset" >
< span  id =Content > Content </ span >
</ div >
</ td ></ tr ></ table >
</ BODY >
</ HTML >
< html >

< head >
< title > window </ title >
< meta  http-equiv ="content-type"  content ="text/html;charset=gb2312" >

< style  type =text/css >
td { 
    font-size: 12px;
    font-family:arial;
    color: #000000;
    line-height: 150%;
    }
.sec1 { 
    background-color: #EEEEEE;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid #FFFFFF
    }

.sec2 { 
    background-color: #E4EAF8;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF; 
    border-top: 1px solid #FFFFFF; 
    border-right: 1px solid gray; 
    font-weight: bold; 
    }

.main_tab {
    background-color: #E4EAF8;
    color: #000000;
    border-left:1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray; 
    }
 </ style >

< script  language =javascript >
<!--  
  function secBoard(n)  {
    for(i=0; i<secTable.cells.length; i++){
      secTable.cells[i].className="sec1";
    }

    secTable.cells[n].className="sec2";

    for(i=0; i<mainTable.tBodies.length; i++){
      mainTable.tBodies[i].style.display="none";
    }

    mainTable.tBodies[n].style.display="block";
  }
//-->
 </ script >

</ head >


< body >

   < table  border =0  cellspacing =0  cellpadding =0  width =549  id =secTable >
     < tr  height =20  align =center >  
       < td  class =sec2  width =10%  onclick ="secBoard(0)" > General Information </ td >
       < td  class =sec1  width =10%  onclick ="secBoard(1)" > Team </ td >
       < td  class =sec1  width =10%  onclick ="secBoard(2)" > Documentation </ td >
       < td  class =sec1  width =10%  onclick ="secBoard(3)" > Test Report </ td >
     </ tr >
   </ table >

   < table  border =0  cellspacing =0  cellpadding =0  width =549  height =240  id =mainTable  class =main_tab >
     < tbody  style ="display:block;" >  
       < tr >  
         < td  align =center  valign =top >   < br >   < br >  text  </ td >
       </ tr >
     </ tbody >
     < tbody  style ="display:none;" >  
       < tr >  
         < td  align =center  valign =top >   < br >
           < br >
          text1  </ td >
       </ tr >
     </ tbody >
     < tbody  style ="display:none;" >  
       < tr >  
         < td  align =center  valign =top >   < br >< br >    text2  </ td >
       </ tr >
     </ tbody >
     < tbody  style ="display:none;" >  
       < tr >  
         < td  align =center  valign =top >   < br >< br >    text3  </ td >
       </ tr >
     </ tbody >  
   </ table >
  </ body >
</ html >
这里是增加选项卡的数目
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="green"
    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%;
color: yellow;
background-color: green;
}
 </ 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 =green  align =center >< tr >< td >
< table  cellpadding =0  cellspacing =0  onselectstart ="return false" >
   < tr  height =20 >
< td  valign =bottom >
   < table  cellspacing =0  cellpadding =0  bgcolor =green >
    < 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 =green  id =td1 ></ td >
    </ tr >
   </ table >
</ td >
< script >
for(i=2;i<carNum;i++)
{
tdBody="<td valign=bottom>"
tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=green>"
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 >
< 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 >
< 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、省技术创新项目申请表','3、技术创新项目立项建议书封面','4、项目开发的目的、意义及必要性','5、国际水平、现状及发展趋势','6、国内产品与技术发展水平、现状','7、项目前期研发及技术准备情况','8、项目产业化实施方案','9、项目进度安排与完成期限','10、技术经济指标','11、项目资金安排情况','12、进口设备仪器情况','13、社会、经济效益评价','14、项目承担单位及项目协作单位情况','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]+" ";
    }

    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  id ="win"  STYLE ="position:absolute; top:0; left:10; height:100%; width:100%; border:none thin gray" >
</ div >
</ body >
</ html >
< html >
< head >
< title >  New Document  </ title >
< style >
td      { font-family: 宋体; font-size: 9pt;}
.ooib { border-width: 1px; border-style: none solid solid; border-color: #CC3333; background-color: #E4E5EE;}
.ooih td { border-width: 1px; padding: 0 5; }
.ooihj { color: #CC3333; background-color: #E4E5EE; border-style: solid solid none; border-color: #CC3333; cursor: hand}
.ooihs { color: #6600CC; background-color: #ccccFF; border-style: solid; border-color: #6600CC #6600CC #CC3333; cursor: hand}
.ooihx { border-style: none none solid; border-color: #CC3333; }

 </ style >
< script  language ="JavaScript" >
function ghbq(td)
{
  var tr = td.parentElement.cells;
  var ob = obody.rows;
  for(var ii=0; ii<tr.length-1; ii++)
  {
    tr[ii].className = (td.cellIndex==ii)?"ooihj":"ooihs";
    ob[ii].style.display = (td.cellIndex==ii)?"block":"none";
  }
}
 </ script >
</ head >

< body >

< table  class ="ooih"  border ="0"  cellspacing ="0"  cellpadding ="0"  width ="400"  height ="19" >
   < tr >
< td  class ="ooihj"  nowrap onclick ="ghbq(this)" > 标签一 </ td >
< td  class ="ooihs"  nowrap onclick ="ghbq(this)" > 标签二 </ td >
< td  class ="ooihs"  nowrap onclick ="ghbq(this)" > 标签三 </ td >
< td  class ="ooihs"  nowrap onclick ="ghbq(this)" > 标签四 </ td >
< td  class ="ooihx"  width ="100%" > &nbsp; </ td >
   </ tr >
</ table >
< table  class ="ooib"  id ="obody"  border ="0"  cellspacing ="0"  cellpadding ="0"  width ="400"  height ="300" >
   < tr >
     < td >
标签内容一
     </ td >
   </ tr >
   < tr  style ="display: none" >
     < td >
标签内容二
     </ td >
   </ tr >
   < tr  style ="display: none" >
     < td >
标签内容三
     </ td >
   </ tr >
   < tr  style ="display: none" >
     < td >
标签内容四
     </ td >
   </ tr >
</ table >

</ body >
</ html >
 
lgb571
关注
专栏目录
js tab效果代码增强版
10-30
### js Tab效果代码增强版详解 #### 一、概述 本文档将详细介绍一款兼容IE与Firefox浏览器的增强版JS Tab效果代码。此代码不仅能够实现常见的Tab切换功能，还优化了样式并增强了交互体验，使其在不同的浏览器环境...
js+css实现tab菜单切换效果的方法
10-24
本文介绍了如何使用JavaScript（js）和层叠样式表（css）来实现Tab菜单切换效果的方法，该方法通过实例演示了css和js代码的具体实现方式，具有一定的参考价值。 首先，从描述中可以看出，本文主要通过一个具体的...
table的tab编写
weixin_43895556的博客
12-10 697
layui table标签的tab实现 table.render({ elem: table_id , url: ??? , page: true //开启分页 , limit: 10 , limits: [10, 15, 20, 25, 30] , where: {实体类字段属性: 属性值} , request: { pageName: ‘pageNo’ , limitName: ‘pageSi...
out.println("<table border=\"1\" width=\"100%\">");中 \ 的意思
11-14 965
转义字符
Table栏切换
涩的博客
06-24 6772
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可多次使用的jQuery tab选项卡</title> <style ty...
jquery之table：给table动态增加行、清空table
热门推荐
孤天浪雨
07-10 2万+
比如设置table的id为tab var trHTML = "..." $("#tab").append(trHTML);//在table最后面添加一行 $("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行 $("#tab tr:not(:first)").empty(); //清空table（除了第一行以外
div+css实现两列table效果示例
12-13
在本示例中，我们看到如何利用这些技术创建一个两列的表格效果。这种效果通常用于构建信息输入表单或者数据展示区域。 首先，`div`元素是HTML中的一个块级元素，它允许我们将页面内容进行分组，并可以应用样式来...
jQuery实现简单的tab标签页效果
10-21
在本文中，我们将深入探讨如何使用jQuery来实现一个简单的tab标签页效果。这个效果涉及到jQuery的基本元素遍历、样式动态操作以及事件处理等技术。首先，我们来看一下HTML结构： ```html <div class="tabTitle"> ...
Js动态操作表格
weixin_30617561的博客
09-25 73
HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>装备</title> <meta http-equiv="...
jquery.datatables出现DataTables warning: table id=tabList - Cannot reinitialise DataTable. For more in
惡魔乜單純的博客
11-24 5527
DataTableswarning: table id=tabList - Cannot reinitialise DataTable.
table表格-多级表头
hrbsfdxzhq01的博客
02-19 3087
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。 层级分析：第一列日期；第二列配送信息                   配送信息列：嵌套姓名2列；嵌套地址三列                   地址列：嵌套省份3列、市区4列、地址5列、邮编6列 &lt...
html table tab 焦点,html 更改tab键焦点
weixin_42445142的博客
06-10 694
1. 如何调整焦点到一个DIV上，How to focus to a DIV in Javascript?Div元素不是Input，所以通常意义上focus()会失效。document.getElementById('tries').focus();//doesn't work但是我们会有这种需求，需要我们focus到某一个DIV上，并且handle一些键盘事件，比如我们使用DIV来模拟了一个动态...
jQuery + CSS 实现Tab分页功能
中国风的专栏
02-16 4914
Html代码 div id="divTab" style="width:500px;">      table cellSpacing="0" cellPadding="0" width="100%" border="0">          tr>              td valign="bottom" align="left" width="100%">
TabPane 选项卡 模拟
爱生活
06-17 1136
var Num=4; //这里是增加选项卡的数目var carNum=2+Numfunction document.onselectstart(){var obj=event.srcElement if(obj.tagName=="SPAN"){return false;}}function document.onmousedown(){var obj=event.srcElementvar po
页面表格可编辑input框变大的问题
weixin_38617682的博客
09-17 2501
1、在页面添加表格表头 table width="100%" border="1" id="damageTab"> tr> td width="10px" align="center">序号td> td width="100px" align="center">车损详情td> td width="20px" align="
前端用html写excel文件直接打开
全易
09-10 573
html文件直接用excel打开
水平垂直居中的几种方法（总结）
最新发布
致未来的你。的博客
09-11 1102
水平垂直居中的几种方法（总结）
HTML + CSS - 网页布局之一般布局&浮动布局
qq_51222843的博客
09-11 1086
讲解CSS中的一般布局以及浮动布局
JavaScript表格样式与Tab效果实战
"本文主要介绍了如何使用JavaScript和jQuery实现表格隔行变色以及Tab标签页的特效。通过实例代码展示了如何使用原生JavaScript对表格进行操作，以及如何借助jQuery简化代码，实现更高效的动态效果。" 在网页设计中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值