分别利用javascript的源码和jQuery来实现一个简单的选项卡，对比各自的步骤。

<!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>

div{

    display:none;

    width:50px;

    height:50px;

    border:1px solid red;

    }

.active{

    display:block;

    }

.back{

    background:red;

    }

</style>

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

<script>

//javascript源码写

/*window.onload=function(){

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

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

    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';

                }

            this.className='back';

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

            }

        }

    };*/

//jQuery写

$(function(){

    $('input').click(function(){

        $('input').attr('class','');

        $('div').css('display','none');

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

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

        });

    });

</script>

<script>

</script>

</head>

<body>

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

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

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

<div class="active"></div>

<div></div>

<div></div>

</body>

</html>

jQuery实例—选项卡（js源码和jQuery）【一些常见方法（1）-练习】的更多相关文章

  1. Vue.js 源码分析(五) 基础篇 方法 methods属性详解

    methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...

  2. 非常实用的JQuery的选项卡切换源码

    <html> <head> <meta charset="utf-8"> <title>简单选项卡</title> &l ...

  3. jQuery插件pagination.js源码解读

    pagination的github地址:https://github.com/gbirke/jquery_pagination 公司用的是1.2的版本,所以我就读1.2的了. jQuery.fn.pa ...

  4. js源码 模仿 jquery的ajax的获取数据（get，post ）的请求封装

    function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', ...

  5. Jquery.cookie.js 源码和使用方法

    jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...

  6. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  7. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  8. 第二十五课：jQuery.event.trigger的源码解读

    本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...

  9. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

随机推荐

  1. codeigniter分页类传多个参数(转)

    http://example.com/index.php/控制器/方法名/页面的偏移值 页面的偏移值必须是方法名后第一个参数,否者分页类不能判断当前是哪一页,而用ci的分页类进行页面跳转时他是把偏移值 ...

  2. Jordan Lecture Note-1: Introduction

    Jordan Lecture Note-1: Introduction 第一部分要整理的是Jordan的讲义,这份讲义是我刚进实验室时我们老师给我的第一个任务,要求我把讲义上的知识扩充出去,然后每周都 ...

  3. jQuery获取表单各元素的值

    radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio' ...

  4. liunx 文件相关

    一.linux中 文件属性以 l.b.c.d.开头的都是什么文件? lrwxrwxrwx 1 root root 11 Aug 20 08:38 core -> /proc/kcoredrwxr ...

  5. iOS AR技术初体验，使用EasyAR示例程序的小白指南

    QQ前两天的传递火炬,是我第一次直接接触到AR.(虽然之前听同事说过,因为他喜欢玩游戏,PS.3DS等等都玩过,这个技术最开始就是从这里出现的).所以感觉很有趣,就想自己也试着搞一下玩玩...下面是我 ...

  6. 炼数成金hadoop视频干货02

    视频地址:http://pan.baidu.com/s/1dDEgKwD 这个视频理论性太强,不过倒是给了自己唯一的选项就是自己实践,不用像以前那样视频中敲一个字符,我也敲一个字符 讲到的内容: 介绍 ...

  7. java中关于json传图片的方法

    一般来说传图片可以以流的形式来传输,即便是用json传输,一般也都是传一个地址,而图片都存在服务器上,然后顺着地址发送请求下载图片. 但是这次公司的项目中,图片是存在oracle数据库中的blob字段 ...

  8. SandBox+NSBundle

    1.iOS的文件系统 1.1.SandBox(沙箱.沙盒) 在iOS中,任何一个App都存放在自己的一个称之为SandBox中 1)SandBox的组成 a.Bundle Container:放应用程 ...

  9. UVA442 Matrix Chain Multiplication 矩阵运算量计算（栈的简单应用）

    栈的练习,如此水题竟然做了两个小时... 题意:给出矩阵大小和矩阵的运算顺序,判断能否相乘并求运算量. 我的算法很简单:比如(((((DE)F)G)H)I),遇到 (就cnt累计加一,字母入栈,遇到) ...

  10. LeetCode 345

    Reverse Vowels of a String Write a function that takes a string as input and reverse only the vowels ...