分别利用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. ResolveClientUrl("~/Styles/Site.cs")%>

    区别: <%=ResolveClientUrl("~/Styles/Site.cs")%> 和 <%=ResolveUrl("~/Styles/Site ...

  2. java_SSH整合1

    Domain: public class Department { private Long id; private Set<User> users = new HashSet<Us ...

  3. laraval框架之数据库不可不吐槽的坑

    最近做的项目一直在用laraval框架,有些地方确实很方便,但是有些方面实在是太坑了,就比如这次在数据库里,官方文档写的是 Take note that email is not a required ...

  4. hive-通过Java API操作

    通过Java API操作hive,算是测试hive第三种对外接口 测试hive 服务启动 package org.admln.hive; import java.sql.SQLException; i ...

  5. jQuery中利用JSONP解决AJAX跨域问题

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  6. uva 133 The Dole Queue 双向约瑟夫环 模拟实现

    双向约瑟夫环. 数据规模只有20,模拟掉了.(其实公式我还是不太会推,有空得看看) 值得注意的是两个方向找值不是找到一个去掉一个,而是找到后同时去掉. 还有输出也很坑爹! 在这里不得不抱怨下Uva的o ...

  7. [转]Response.AddHeader 文本下载

    本文转自:http://hi.baidu.com/yuxi981/item/7c617fc41b03ad60f6c95d30 Response.AddHeader实现下载     /// <su ...

  8. Windows Embedded CE 6.0开发环境的搭建

    最近开始在学习嵌入式,在这里首先得安装Windows Embedded CE 6.0,其中遇到了很多问题,电脑的系统以及相关配置都会在安装过程中受到影响,因此笔者就安装中的问题以及环境搭建来介绍一下. ...

  9. ListView使用自定义适配器的情况下实现适配器的控件点击事件执行Activity界面中的方法

    如果ListView使用的是自定义的适配器,比如MyArrayAdapter extends ArrayAdapter<String> 那么,如何实现适配器中的点击事件执行activity ...

  10. Repeater控件中的LinkButton(转)

    LinkButton小用法: 1.在使用时可以通过CommandName和CommandArgument属性联合起来绑定并传值,如:CommandName="record"Comm ...