<!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. Linux内核补丁升级

    如果机器已经联网,直接利用包管理工具更新,需要注意的是现在3.0以上的内核引入了签名机制,需要导入签名的key,参考步骤如下: 1.导入keyrpm --import https://www.elre ...

  2. eclipse failed to create the java virtual machine 问题图文解析

    eclipse failed to create the java virtual machine 问题图文解析 分类: java常用软件异常2010-10-02 23:45 73200人阅读 评论( ...

  3. python获取指定星期的日期

  4. EF – 问题集锦

    1.对一个或多个实体的验证失败.有关详细信息,请参见“EntityValidationErrors”属性 在EF5.0修改实体的时候,出现“对一个或多个实体的验证失败.有关详细信息,请参见“Entit ...

  5. 【Java EE 学习 20】【使用过滤器实现登陆验证、权限认证】【观察者模式和监听器(使用监听器实现统计在线IP、登录IP 、踢人功能)】

    一.使用过滤器实现登录验证.权限认证 1.创建5张表 /*使用过滤器实现权限过滤功能*/ /**创建数据库*/ DROP DATABASE day20; CREATE DATABASE day20; ...

  6. 【数据结构】建立和平衡AVL二叉树

    一步一步写平衡二叉树(AVL树) 原文地址:http://www.cppblog.com/cxiaojia/archive/2012/08/20/187776.html 我添加了一些内容,以充实整个算 ...

  7. <转>WCF实例化模式与高并发处理

    WCF实例化模式与高并发控制 1.实例化模式InstanceModel 1.1 PerCall:单调模式 每次调用都会产生一个实例 例[ServiceBehavior(InstanceContextM ...

  8. wp8 入门到精通 定时更新瓷贴

    public class ScheduledAgent : ScheduledTaskAgent { static ScheduledAgent() { Deployment.Current.Disp ...

  9. 基于ZigBee的家居控制系统的设计与应用

    基于ZigBee的家居控制系统的设计与应用 PPT简介:http://pan.baidu.com/s/1i38PC6D 摘  要 智能家居是未来家居的发展方向,其利用先进的网络技术.计算机技术和无线通 ...

  10. Android中设定EditText的输入长度(转)

    如何限定Android的Text中的输入长度呢? 方法一:可以在layout xml中加上属性android:maxLength 比如: <EditText         android:id ...