tab选项卡与iframe实现异步加载/绝对定位与相对定位实现小圆角表格

 

 1  <style type="text/css">
 2  html   {  
 3      FONT-SIZE :  12px ;  MARGIN :  0px ;  COLOR :  #000000 ;  BACKGROUND-COLOR :  #ffffff ;  
 4      filter : progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) ; }  
 5 
 6  .myct {
 7      height :  100px ;
 8      border-right :  1px solid #99CCFF ;
 9      border-bottom :  1px solid #99CCFF ;
10      border-left :  1px solid #99CCFF ;
11      width :  593px ;
12      padding-top :  5px ;
13      padding-left :  5px ;
14  }
15  .lib_Menubox  {
16      height : 28px ;
17      line-height : 28px ;
18      border-bottom :  1px solid #95C9E1 ;
19      width :  600px ;
20  }
21  .lib_Menubox ul  {
22      margin :  0px ;
23      padding :  0px ;
24      list-style :  none ;
25      height :  25px ;
26      position :  relative ;
27      top :  2px ;
28  }
29  .lib_Menubox li  {
30      float : left ;
31      display : block ;
32      cursor : pointer ;
33      margin-right : 8px ;
34      line-height : 25px ;
35      width : 114px ;
36      border-top :  1px solid #99CCFF ;
37      border-right :  1px solid #99CCFF ;
38      border-left :  1px solid #99CCFF ;
39      text-align :  center ;
40      font-weight : bold ;
41  }
42  .normaltab  {
43      color : #949694 ;
44      background : #E4F2FD ;
45  }
46  .hovertab  {
47      background : #FFFFFF ;
48      color : #739242 ;
49      height : 26px ;
50  }
51  .dis  {
52      display :  block ;
53  }
54  .undis  {
55      display :  none ;
56  }
57  </style>

 

 

 1  < script type = " text/javascript "  language = " javascript " >    
 2 
 3  var  tb_1 = false ;
 4  var  tb_2 = false ;
 5  var  tb_3 = false ;
 6  var  tb_4 = false ;
 7  function  HoverLi(n){   
 8  // 如果有N个标签,就将i<=N;   
 9  for ( var  i = 1 ;i <= 4 ;i ++ )
10  { // 全部重写成normaltab与undis,后再设成dis与hovertab;
11      document.getElementById( ' tb_ ' + i).className = ' normaltab ' ;
12      document.getElementById( ' tbc_0 ' + i).className = ' undis ' ;
13  }
14 
15      document.getElementById( ' tbc_0 ' + n).className = ' dis ' ;
16      document.getElementById( ' tb_ ' + n).className = ' hovertab ' ;   
17       if (tb_2 == false   &&  n == 2 )
18      {
19  document.getElementById( ' tbc_0 ' + n).innerHTML  =   " <iframe src='http://www.qq.com' frameborder='0' scrolling='no' frameborder='0' width='580' height='282'></iframe> " ;
20       tb_2 = true ; // 防止第二次点击时加截
21      }
22       if (tb_3 == false   &&  n == 3 )
23      {
24  document.getElementById( ' tbc_0 ' + n).innerHTML  =   " <iframe src='http://www.baidu.com' frameborder='0' scrolling='no' frameborder='0' width='580' height='282'></iframe> " ;
25       tb_3 = true ;
26      }
27       if (tb_4 == false   &&  n == 4 )
28      {
29  document.getElementById( ' tbc_0 ' + n).innerHTML  =   " <iframe src='http://www.sina.com' frameborder='0' scrolling='no' frameborder='0' width='580' height='282'></iframe> " ;
30       tb_4 = true ;
31      }
32  }
33    
34  < / script>

 

 1  < div  class ="mytab" >
 2     < div  class ="lib_Menubox" >
 3       < ul >
 4         < li  id ="tb_1"  class ="hovertab"  onclick ="HoverLi(1);" > 源码爱好者 </ li >
 5         < li  id ="tb_2"  class ="normaltab"   onclick ="HoverLi(2);" > 最新更新 </ li >
 6         < li  id ="tb_3"  class ="normaltab"  onclick ="HoverLi(3);" > 下载排行 </ li >
 7         < li  id ="tb_4"  class ="normaltab"  onclick ="HoverLi(4);" > 大 乐 斗 </ li >
 8       </ ul >
 9     </ div >
10     < div  class ="myct" >
11       < div   id ="tbc_01"  class ="dis" >  我的div  </ div >
12       < div   id ="tbc_02"  class ="undis"   > 这里是VB.NET的相关内容 </ div >
13       < div   id ="tbc_03"  class ="undis"   > 这里是JAVA的相关内容 </ div >
14       < div   id ="tbc_04"  class ="undis"   > 这里是PHP5的相关内容 </ div >
15     </ div >
16  </ div >

 

 

转载于:https://www.cnblogs.com/chixiaojin/archive/2010/08/15/1799954.html