jquery写简单的div切换

最新推荐文章于 2023-09-25 15:20:54 发布

distantimg

最新推荐文章于 2023-09-25 15:20:54 发布

阅读量115

点赞数

文章标签： js css html jquery javascript

本文链接：https://blog.csdn.net/u012138854/article/details/109590914

版权

<!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>

distantimg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery写简单的div切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #odiv div{width: 200px; height: 200px; bo...
复制链接

扫一扫