<!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. .gitignore详解

    今天讲讲Git中非常重要的一个文件――.gitignore. https://git-scm.com/docs/gitignore 首先要强调一点,这个文件的完整文件名就是“.gitignore”,注 ...

  2. 面试中关于Java你所需知道的的一切

    本篇文章会对面试中常遇到的Java技术点进行全面深入的总结,帮助我们在面试中更加得心应手,不参加面试的同学也能够借此机会梳理一下自己的知识体系,进行查漏补缺. 1. Java中的原始数据类型都有哪些, ...

  3. 玩 perf

    有一个进程happy在执行,另一个进程spy发送了一个信号把happy给杀死了 我怎么能通过perf抓到spy进程? happy进程一直执行 在spy进程中调用kill(happy's pid) ,发 ...

  4. C#.NET 大型企业信息化系统集成快速开发平台 4.1 版本 - 面向数据库SQL语句的应用开发二

    很多传统企业.包括系统集成类的IT企业,若不是从事专业软件开发领域的,能做出一套适合本公司企业信息化的灵活的信息系统还是很有难度的,还有一些已经多年不写程序的资深开发人员,初学者,都难把一个整套系统实 ...

  5. c语言之【#ifdef】

    电脑程序语句,我们可以用它区隔一些与特定头文件.程序库和其他文件版本有关的代码. 1 2 3 #ifdef 语句1     // 程序2 #endif 可翻译为:如果宏定义了语句1则程序2. 作用:我 ...

  6. 方法构造和方法重载之奥特曼与大boss之战

    知识点的总结: 1.类中的方法分为两类:1.普通方法: 2.构造方法. 2.构造方法的格式:  public 类名(数据类型  参数名,...){ } 3.构造方法的用途:  1.实例化对象.  2. ...

  7. Delphi 实现数字转大写

    从网上找的一段代码 /// <summary> /// 小写转大写 /// </summary> /// <param name="mmje"> ...

  8. couldn't open file: data/coco.names

    在ubuntu下配置yolo(v2)的时候,编译了源码后,尝试运行demo: ./darknet detect cfg/yolo.cfg yolo.weights data/dog.jpg 结果报错提 ...

  9. 自学 Java 怎么入门

    自学 Java 怎么入门? 595赞同反对,不会显示你的姓名     给你推荐一个写得非常用心的Java基础教程:java-basic | 天码营 这个教程将Java的入门基础知识贯穿在一个实例中,逐 ...

  10. CentOS添加163源

    1.备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-B ...