<!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. fcntl函数

    很多时候,当我们有多个进程要访问同一个文件的时候,为了防止多进程访问导致的不一致,我们就要考虑进程间的同步问题. fcntl是一个很强大的函数,我们可以通过它给文件的某一部分上锁 int fcntl( ...

  2. JS数组去重比较

    数组去重复是一个常见的需求,我们暂时考虑同类型的数组去重复.主要是理清思路和考虑执行性能. for循环删除后面重复的 var uniqueFor = function(arr) { for (var ...

  3. 解决某些Android Permission denied

    最近遇到一个问题,总是在模拟器重报Permission denied错误,于是我直接在手机上测试,发现没有错误,于是很郁闷,反复在AndroidManifest中加入权限   <uses-per ...

  4. 2016-2017-2 《Java程序设计》预备作业2总结

    2016-2017-2 <Java程序设计>预备作业2总结 古希腊学者普罗塔戈说过:「头脑不是一个要被填满的容器,而是一束需要被点燃的火把.」 在对计算机系的学生情况的调查中,我说: 最近 ...

  5. WPF实现物理效果 拉一个小球

    一直以来都对物理效果有神秘感,完全不知道怎么实现的.直到看到了周银辉在老早前写的一篇博客:http://www.cnblogs.com/zhouyinhui/archive/2007/06/23/79 ...

  6. 利用Highcharts插件制作动态图表

    向大家推荐一款js插件,用于绘制图表Highcharts,具体操作可参考官方网站:http://www.hcharts.cn/ 1.如下为本人制作的图形效果如下,当然其效果远不止这些,大家还可以深入研 ...

  7. NDK开发之一

    2015.07.22 Wiki_Tree: --NDK开发: --NDK特征: --MK文件编写规则: NDK开发: Ndk-build编译时会生成的两个同名的so库,位于不同的目录/project ...

  8. 【CSS】css自定义字体

    源:http://www.cnblogs.com/lhb25/archive/2011/02/11/1951035.html 1.@font-face 定义一个字体 2.例子

  9. 编译安装php7

    yum install libxml2-devel curl-devel openjpeg openjpeg-devel openjpeg-libs libjpeg libpng freetype l ...

  10. java-工具类-读取配置文件

    java读取配置文件,当发现文件被修改后则重新加载 package com.zg.config; import java.io.File; import java.io.FileInputStream ...