jquery写简单的div切换

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

distantimg

162人浏览 · 2016-12-06 21:01:00

distantimg · 2016-12-06 21:01:00 发布

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

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。