<!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. DOCKER是什么，它解决了什么问题？（转）

    Docker 虚拟机 1. docker与虚拟机性能比较 2. 如日中天的Docker解决了什么问题?

  2. 错误"ORA-04091: table is mutating, trigger/function may not see it"的原因以及解决办法

    错误的原因该错误是在编写trigger时常遇到的问题,其根本原因是由于对本表的操作造成的.对于使用了for each row 的触发器,做了DML操作(delete,update,insert),还没 ...

  3. 发布一个免费开源软件-- PAD流程图绘制软件PADFlowChart

    软件的可执行文件下载:PADFlowChart-exe.zip MD5校验码:91FCA9FEC9665FD09BEB3DA94ADC1CE6 SHA1校验码:ECD742AA3092A085AB07 ...

  4. Java 数组基础

    数组 数组(Array):相同类型数据的集合. 定义数组 方式1(推荐,更能表明数组类型) type[] 变量名 = new type[数组中元素的个数]; 比如: int[] a = new int ...

  5. FineUI（专业版）v1.2.0 和 FineUI（开源版）v4.1.1 同时发布！

    FineUI(开源版)v4.1.1 (建议所有 v4.x 升级到此版本):http://fineui.com/demo/ +2014-08-15 v4.1.1        -修正Form中表单字段设 ...

  6. Python2.7.6标准库内建函数

        Built-in Functions     abs() divmod() input() open() staticmethod() all() enumerate() int() ord( ...

  7. Wireshark基本介绍和学习TCP三次握手

    wireshark介绍 wireshark的官方下载网站: http://www.wireshark.org/ wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示 ...

  8. jQuery1.9之后使用on()绑定 动态生成元素的 事件无效

    来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', functi ...

  9. 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  10. 解决：IOError: [Errno 28] No space left on device（设备空间不足）

    问题重现: 问题分析: 出现这样的问题,是磁盘空间不足,需要清理.卸载一下系统非必要软件和文件. 解决方案: 可以使用如下命令清理: #自动清理残余的依赖库 sudo apt-get autoremo ...