<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div>

        <input type="button" value='red'>

        <input type="button" value='green'>

        <input type="button" value='blue'>

        <input type="button" value='purple'>

        <input type="button" value='pink'>

        <div style='width:200px;height:200px;'></div>

    </div>

    <script>

    /*

        选项卡 tab切换

    */

        var Chef = {

            input:document.getElementsByTagName('input'),

            div:document.getElementsByTagName('div')[1],

            inputEvent:function(){

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

                    this.input[i].onclick = function(){

                        Chef.div.style.background = this.value;

                    }

                }

            }

        }

        Chef.inputEvent();

    </script>

</body>

</html>

选项卡 tab切换的更多相关文章

  1. VUE实现Studio管理后台（二）：Slot实现选项卡tab切换效果，可自由填装内容

    作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...

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

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

  3. angularjs 选项卡tab切换（移动端用户订单状态）

    <!--头部导航tabs切换--> <div class="tabs-striped tabs-top tabs-background-positive tabs-colo ...

  4. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  5. 小程序之 tab切换(选项卡)

    好久没有写东西了   今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view < ...

  6. 【Little Demo】左右按钮tab选项卡双切换

    通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...

  7. 监听浏览器tab选项卡选中事件，点击浏览器tab标签页回调事件，浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  8. tab切换-2016.6.4

    以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...

  9. tab切换效果

    选项卡是一个神奇的网页效果,不论大小网站,比如B2B像阿里巴巴,慧聪网,还有B2C这个不用说了吧,爱逛网店的童鞋们都知道的,像京东商城,淘宝网,拍拍网,一号店,凡客诚品,等等各种网各种网店,选项卡不仅 ...

随机推荐

  1. balabalabala

    [微分享]:种子不落在肥土而落在瓦砾中,有生命力的种子决不会悲观和叹气,因为有了阻力才有磨炼.

  2. Oulipo（poj 3461）

    题意:求b这个字符串在a中出现的次数 这里不用KMP,用hash #include<cstdio> #include<iostream> #include<cstring ...

  3. nfs server的配置 Starting NFS daemon: [FAILED]

    总结了一下是nfs server的制作过程:nfs(Network File System)其实就是说,这个机器的硬盘不够了,我要把文件放到别的服务器上去,服务器端的配置如下:首先(1)确保你的机器上 ...

  4. 二、JavaScript语言--JS基础--JavaScript进阶篇--JavaScript内置对象

    1.什么事对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方 ...

  5. C++动态数组

    一: 一维数组初始化 标准方式1:int value[100]; //value[i]的值不定,因为没有初始化:标准方式2:int value[100] = {1,2,3}; //value[0],v ...

  6. iOS源码之OC相册，可以循环查看图片

    #import "ViewController.h" #import "YZUIScrollView.h" #define kuan ([UIScreen ma ...

  7. JAVA作业）01

    一,四则运算 (一)  设计思想 使用Scanner类读取运行时用户输入数据,然后进行数据类型转换,完成四则运算之后利用输出类输出. (二)  流程图 (三)程序代码 //Zhangxiaochen ...

  8. Loadrunner之HTTP接口测试脚本实例

    接口测试的原理是通过测试程序模拟客户端向服务器发送请求报文,服务器接收请求报文后对相应的报文做出处理然后再把应答报文发送给客户端,客户端接收应答报文结果与预期结果进行比对的过程,接口测试可以通过Jav ...

  9. Netty网络编程之NIO概览与简单应用

    >>关于NIO Java NIO即Java Non-blocking IO(Java非阻塞I/O),是Jdk1.4之后增加的一套操作I/O工具包,又被叫做Java New IO. (1)R ...

  10. MySQL应用的异常记录

    >>Error Code: 1045. Access denied for user 'test'@'%' (using password: YES) 使用MySQL的select * i ...