zoukankan      html  css  js  c++  java
  • tab切换

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tab切换</title>
        <link rel="stylesheet" href="css/reset.css">
        <style>
        body{
        text-align: center;
    }
    ul{
         456px;
        margin: 0 auto;
    }
    ul li{
        float: left;
         150px;
        height: 60px;
        line-height: 50px;
        border: 1px solid #eee;
    }
    .on{
        background-color: #eee;
        color: #fff;
    }
    .tab1,.tab2,.tab3{
         500px;
        height: 500px;
        margin: 0 auto;
    }
    .tab1{
        background-color: green;
    }
    .tab2{
        background-color: gray;
        display: none;
    }
    .tab3{
        background-color: red;
        display: none;
    }
        </style>
    </head>
    <body>
        <ul class="clearfix">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <div class="tab1">第一张</div>
        <div class="tab2">第二张</div>
        <div class="tab3">第三张</div>
    </body>
        <script>
        var oLi=document.getElementsByTagName('li');
        var oDiv=document.getElementsByTagName('div');
        for(var i=0;i<oLi.length;i++){
            oLi[i].index=i;
            oLi[i].onclick=function(){
               for(var i=0; i<oLi.length;i++){
                  oLi[i].className='';
                  oDiv[i].style.display='none';
               }
               this.className='on';
               oDiv[this.index].style.display='block';

            }
        }
    </script></html>

  • 相关阅读:
    第三次作业——吉林市两日游规格说明书
    第三次作业——四则运算试题生成
    第三次作业——单元测试
    第三次作业——效能分析
    第三次作业——代码规范
    第三次作业——功能测试
    第二周程序作业
    第二周例行报告
    每周例行报告(10.8-10.14)
    每周例行报告(9.18-10.7)
  • 原文地址:https://www.cnblogs.com/chabai/p/5200261.html
Copyright © 2011-2022 走看看