jquery写简单的div切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    #odiv div{width: 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>
巴特西

jquery写简单的div切换

最新文章

热门文章
