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>
复制代码

posted @   distant-遥远  阅读(337)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示