<!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切换的更多相关文章

  1. 用jquery写循环播放div的相关笔记 珍贵的总结 -1

    用jquery写循环播放div line-height应用的元素的 层次? line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行 ...

  2. 用jquery写循环播放div -2

    前面所说的class html元素标签的写法也要有层次性, 这个层次性其实也就是常说的 css类写法要有一个"命名空间, 名字空间" "namespace" 在 ...

  3. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  4. 一款jquery写出来的tab切换

    当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...

  5. jQuery 写的幻灯左右切换插件

    <html> <head> <meta charset="utf-8"> <title>官网</title> <s ...

  6. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  7. jQuery实现简单的tab切换

    html: <section>   <nav id="nav">     <a class="on">tab1</a& ...

  8. 纯CSS实现nav导航栏+jQuery实现article区DIV切换

    效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...

  9. Jquery tab 选项卡 无刷新切换

    转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...

随机推荐

  1. ssh远程执行目标机器上的命令

    一句话: ssh -t -p 端口号 用户名@远程机器IP '远程机器上的命令完整路径' 例如: ssh -t -p 22 yangjunming@dev '/opt/app/deploy.sh' 注 ...

  2. AppBox升级进行时 - Any与All的用法（Entity Framework）

    AppBox 是基于 FineUI 的通用权限管理框架,包括用户管理.职称管理.部门管理.角色管理.角色权限管理等模块. 属于某个角色的用户列表(Any的用法) 使用Subsonic,我们有两种方法获 ...

  3. 你可能不知道的 NaN 以及 underscore 1.8.3 _.isNaN 的一个 BUG

    这篇文章并不在我的 underscore 源码解读计划中,直到 @pod4g 同学回复了我的 issue(详见 https://github.com/hanzichi/underscore-analy ...

  4. IP多媒体子系统(IP Multimedia Subsystem,IMS)

      目录 1 什么是IP多媒体子系统[1] 2 IMS产生的背景[2] 3 IMS的特点分析[3] 4 IMS中的功能实体[3] 5 IMS中的接口和协议[3] 6 参考文献 [编辑] 什么是IP多媒 ...

  5. I finally made sense of front end build tools. You can, too.

    来源于:https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b#.nvnd2vsd8   ...

  6. SVM（支持向量机）的一点理解

    最近有被问到SVM的问题,不懂装懂,羞愧不已.百度有很多深入浅出介绍SVM的文章,我就不赘述了,这里写一点自己肤浅的理解. SVM的核心思想是把求解低维空间上的高维分类器转化为求解高维函数空间上的线性 ...

  7. hdu5000 背包dp

    题意可抽象为:N个包中每个包容量是T[i],每个包都拿一些,设拿出的总数为sum时的方案数为q,求max(q) 设dp[i][j]为拿了前i个包,共拿出了j物品时的方案数.那么 for i=1 to ...

  8. 计数器(counter)，有序字典(OrderDict)，默认字典(defaultdict)，可命名元祖(namedtuple)，双向队列(deque)，单项队列(deuqe.Queue)

    Python_Day_05 计数器(counter),有序字典(OrderDict),默认字典(defaultdict),可命名元祖(namedtuple),双向队列(deque),单项队列(deuq ...

  9. PS快捷键

  10. Architectural Model - SNMP Tutorial

    30.3 Architectural Model Despite the potential disadvantages, having TCP/IP management software oper ...