<!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. AutoMapper用法

    可在每层这样写一个类,整合每个实体类的映射 public class AutoMapperHelper { public static void Register() { Mapper.Initial ...

  2. BZOJ 2286 消耗战 (虚树+树形DP)

    给出一个n节点的无向树,每条边都有一个边权,给出m个询问,每个询问询问ki个点,问切掉一些边后使得这些顶点无法与顶点1连接.最少的边权和是多少.(n<=250000,sigma(ki)<= ...

  3. 【三石jQuery视频教程】01.图片循环展示_再次重发

    之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...

  4. Mongodb学习笔记二(Mongodb基本命令)

    第二章 基本命令 一.Mongodb命令 说明:Mongodb命令是区分大小写的,使用的命名规则是驼峰命名法. 对于database和collection无需主动创建,在插入数据时,如果databas ...

  5. 建模算法（七）——排队论模型

    (一)基本概念 一.排队过程的一般表示 凡是要求服务的对象称为顾客,凡是为顾客服务的称为服务员 二.排队系统的组成和特征 主要由输入过程.排队规则.服务过程三部分组成 三.排队模型的符号表示 1.X: ...

  6. 平行四边形导航，背景颜色渐变动画（不支持IE6/7/8）

    body{ font-size: 14px; } ul ,li{ margin:0px; padding:0px; list-style: none; } .box{ width: 1000px; h ...

  7. SpringBoot应用部署[转]

    在开发spring Boot应用的过程中,Spring Boot直接执行public static void main()函数并启动一个内嵌的应用服务器(取决于类路径上的以来是Tomcat还是jett ...

  8. 源码升级安装python

    1.下载 python: https://www.python.org/downloads/release/python-2712/ 2.编译安装 sudo mkdir /usr/local/pyth ...

  9. Werewolf流程分析

    werewolf大致流程 首先是房主创建房间,创建成功以后房主开启web socket连接. 其他成员加入房间,加入房间后新成员和老成员的游戏玩家列表都会更新,然后新成员也要开启web socket连 ...

  10. 你所不了解的float（滥用float的怪异现象）

    float设计初衷就是为了实现文字环绕效果 原本页面流布局显示如上图所示,运用了float属性后就显示为如下图所示,这就是浮动的设计初衷 float的一些特性:包裹性.破坏性. 包裹的特性其实主要有三 ...