<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

    #div1 div{width:200px;height:200px;border:1px solid #F00;display:none;}

    .active{ background:red;}

</style>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>

<script>

    /*window.onload = function(){

        var oDiv = document.getElementById('div1');

        var aInput = oDiv.getElementsByTagName('input');

        var aDiv = oDiv.getElementsByTagName('div');

        alert(aInput.length);

        for(var i=0;i<aInput.length;i++){

            aInput[i].index = i;

            aInput[i].onclick = function(){

                for(var i=0;i<aInput.length;i++){

                    aInput[i].className = '';

                    aDiv[i].style.display = 'none';

                }

                aInput[this.index].className = 'active';

                aDiv[this.index].style.display = 'block';

            };

        }

    };*/

    $(function(){

        $('#div1').find('input').click(function(){

            $('#div1').find('input').attr('class','');//将所有元素属性去掉

            $('#div1').find('div').css('display','none');

            $(this).attr('class','active');

            $('#div1').find('div').eq($(this).index()).css('display','block');

        });

    });

</script>

</head>

<body>

<div id="div1">

    <input class="active" type="button" value="1"/>

    <input type="button" value="2"/>

    <input type="button" value="3"/>

    <div style="display:block">111</div>

    <div>222</div>

    <div>333</div>

</div>

</body>

</html>

juery 实现选项卡的更多相关文章

  1. Juery实现选项卡

    选项卡是一种很常用的组件.比如3个选项的选项卡,比较笨的一种办法是,把3个状态写成3个独立页面,互相链接.这样做的问题也显而易见,切换的时候url会变.如果是手机端网页,加载慢一点,给人的感觉是不断的 ...

  2. js和jquery实现简单的选项卡

    选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> &l ...

  3. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  4. CSS类似微软中国首页的竖向选项卡

    效果体验:http://hovertree.com/texiao/css/24/ 源码下载:http://hovertree.com/h/bjaf/hardklps.htm 代码如下: <!DO ...

  5. Bootstrap之选项卡

    <div class="container"> <!-- nav-tabs作为选项卡头部样式 --> <ul class="nav nav- ...

  6. juery实现贪吃蛇的游戏

    今天用juery做了一个贪吃蛇的游戏,代码比较简陋,不过作为这些天学习juery的成果,非常有成就感.另外关于代码内容如有雷同不胜荣幸. 更改了下 让头和身子的颜色不一样 这样好区分些,虽然还是不怎么 ...

  7. juery学习总结(二)——juery操作页面元素

    所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...

  8. juery学习总结(一)——juery选择器

    juery在工作中经常使用,遇到不会的问题往往百度一下,事后就忘.使用到现在也感觉不到有什么提高,为了每天进步一点点,从今天起抽时间记录下对juery的学习. 学习之前,首先要了解什么是网页元素,网页 ...

  9. WinForm中重绘TabControl选项卡标题

    最近开发WinForm频繁使用了TabControl控件,这个控件的选项卡没有BackgroundImage这个属性,那么如何为其各个选项卡添加背景图片呢?(这里说的是每个TabPage的头部,也就是 ...

随机推荐

  1. MS12-020 3389蓝屏攻击

    MS12-020 3389蓝屏攻击 search ms12_020 use exploit/dos/windows/rdp/ms12_020_maxchannelids set rhost 192.1 ...

  2. WEB 安全 - xss 初探

    零.参考资料 网络攻击-XSS攻击详解: 前端安全之XSS攻击: 一.概念 跨站脚本攻击Cross-site scripting (XSS)是一种安全漏洞,攻击者可以利用这种漏洞在网站上注入恶意的客户 ...

  3. 【转】【关于 A^x = A^(x % Phi(C) + Phi(C)) (mod C) 的若干证明】【指数循环节】

    [关于 A^x = A^(x % Phi(C) + Phi(C)) (mod C) 的若干证明][指数循环节] 原文地址:http://hi.baidu.com/aekdycoin/item/e493 ...

  4. rsync参数详解

    Rsync的参数详细解释 -v, --verbose 详细模式输出-q, --quiet 精简输出模式-c, --checksum 打开校验开关,强制对文件传输进行校验-a, --archive 归档 ...

  5. jsp页面jstl标签库失效问题

    可能是版本低的问题,启用jstl即可解决(仅供参考) <%@ page isELIgnored="false"%>

  6. Jmeter之Beanshell---使用Java处理JSON块

    原文出处:https://www.cnblogs.com/xpp142857/p/7374281.html [环境] ①Jmeter版本:3.1,JDK:1.7 ②前置条件:将json.jar包置于. ...

  7. cookie和session实现登录验证

    回话技术,比如在做登录功能的时候,需要配合是用存储在客户端的cookie信息,以及存储在服务端的session来实现登录功能.在cookie中保存了用户的信息,特别是一个特殊的令牌信息,当用户拿着这个 ...

  8. 使用 Hexo 在 GitHub 上建立博客 · Utopia's Daily Note

    使用 Hexo 在 GitHub 上建立博客 # 写在前面 其实我在一月份的就开始写了三篇博客文章,你没有看错,只是写了三篇,然后,就没有然后了.我还在其中一篇文章中写着,不知道自己能够坚持多久.事实 ...

  9. 北京VS上海：“活着为了工作”还是“工作为了生活”？

    Costco开业你去现场了吗?人口普查似的排队场面对于上海人来说已经不稀奇,毕竟当新鲜的商品或是业态来到中国时,上海常常是第一站.但当Costco的新闻不断发酵的同时,在互联网的角落里也有一群人提出了 ...

  10. JAVA如何判断两个字符串是否相等

    ==比较引用,equals 比较值 1.java中字符串的比较:== 我们经常习惯性的写上if(str1==str2),这种写法在java中可能会带来问题 example1: String a=&qu ...