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>