• 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>
  • 相关阅读:
    Python数据爬虫,爬链家的二手房信息
    驼峰命名法
    变量
    use strict(变得严格)
    注释
    分号(line break:分行符号)
    使用外部js文件
    confirm
    prompt
    https和http的区别
  • 原文地址:https://www.cnblogs.com/chixiaojin/p/1799954.html
Copyright © 2020-2023  润新知