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>

  • 相关阅读:
    根据屏幕大小,加载不同大小的图片
    规范命名CSS
    iframe框架加载完成后执行函数
    js获取IP地址
    80端口被System占用 造成Apache不能启动的解方案
    自定义一个仿Spinner
    让你的代码量减少3倍!使用kotlin开发Android(一)
    屏幕适配
    一个旋转菜单
    手势监听GestureDetector 案例
  • 原文地址:https://www.cnblogs.com/chabai/p/5200261.html
Copyright © 2011-2022 走看看