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>

  • 相关阅读:
    B树,B+树比较
    Kafka、RabbitMQ、RocketMQ 全方位对比
    ElasticSearch 笔记
    AtomicReference实现单例模式
    Netty 核心组件笔记
    Netty Reactor 线程模型笔记
    urldecode和urlencode相互转换
    python字符格式问题SyntaxError: Non-UTF-8 code starting with 'xe4'
    百度文字识别获取access token
    Python中MD5加密
  • 原文地址:https://www.cnblogs.com/chabai/p/5200261.html
Copyright © 2011-2022 走看看