• jquery写简单的div切换


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        #odiv div{ 200px; height: 200px; border:1px solid red;display: none; }
        .active{background: red;};
        
        </style>
        <script src='../jquery-3.1.1.min.js'></script>
        <script>
    //     window.onload=function(){
            
    //     var oDiv=document.getElementById('odiv');
    //     var oD=oDiv.getElementsByTagName('input');
    //     var aCn=oDiv.getElementsByTagName('div');
    //    for(i=0; i<oD.length; i++)
    //    {
    //       oD[i].index=i;
    //       oD[i].onclick=function(){
             
            
    //             for(i=0; i<oD.length; i++)
    //             {
    //                 oD[i].className='';
    //                 aCn[i].style.display='none';
    //             }
    //          this.className='active';
    //          aCn[this.index].style.display='block';
             
    //       }
    //    }
    
    // }
    
    $(function(){
        $('#odiv').find('input').click(function(){
          $('#odiv').find('input').attr('class', '');
          $('#odiv').find('div').css('display','none');
          $(this).attr('class', 'active');
          $('#odiv').find('div').eq($(this).index()).css('display', 'block');
        });
    }
        )
        </script>
    </head>
    <body>
    <div id="odiv">
    <input class="oactive" type="button" value='1'/>
    <input type="button" value='2'/>
    <input type="button" value='3'/>
    <div>1111</div>
    <div >222</div>
    <div >333</div>
    </div>
    </body>
    </html>

  • 相关阅读:
    快速切题 sgu102.Coprimes 欧拉函数 模板程度 难度:0
    快速切题 sgu104. Little shop of flowers DP 难度:0
    poj 1163 The Triangle 搜索 难度:0
    sgu101 欧拉路径 难度:1
    快速切题 poj3414 Pots
    xml学习
    linux
    常用排序算法
    C++面试题目
    软件工程的一些问题
  • 原文地址:https://www.cnblogs.com/hack-ing/p/6139111.html
Copyright © 2020-2023  润新知