<!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. Mysql事务隔离级别

    在说Isolation之前,需要谈谈关系型数据库的ACID特性. A(atomicity,原子性),指一个事务要么完全完成,要么全部回滚到起始状态,不存在中间状态. C(Consistency,一致性 ...

  2. android SDK 更新问题完美解决 http://dl-ssl.google.com refused

    现在由于GWF,google基本和咱们说咱见了,就给现在在做Android  或者想学习Android 的朋友带来了诸多的不便,最简单的就是Android SDK Manager 你无法更新了. 现在 ...

  3. 当一个页面出现多个checkbox全选时的处理

    HTML: <input type="checkbox" onclick="boxOnclick(this,'some1')">全选一 <in ...

  4. Codeforces Round #377 (Div. 2)D(二分)

    题目链接:http://codeforces.com/contest/732/problem/D 题意: 在m天中要考k个课程, 数组a中有m个元素,表示第a[i]表示第i天可以进行哪门考试,若a[i ...

  5. jquery学习笔记---requirejs 和模块化编程

    http://www.cnblogs.com/lisongy/p/4711056.html jquery模块化编程:http://www.cnblogs.com/digdeep/p/4602460.h ...

  6. 对Cookie和Session的深入理解

    session对象 session对象用于存储特定的用户会话所需的信息 . Session对象的引入是为了弥补HTTP协议的不足.HTTP协议本身是无状态的,这与HTTP协议本来的目的是相符的,客户端 ...

  7. wifi参考网站

    1.Wireless LAN resources for Linux http://www.hpl.hp.com/personal/Jean_Tourrilhes/Linux/Wireless.htm ...

  8. .net学习之Session、Cookie、手写Ajax代码以及请求流程

    1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...

  9. Linux环境下段错误的产生原因及调试方法小结

    转载自http://www.cnblogs.com/panfeng412/archive/2011/11/06/2237857.html 最近在Linux环境下做C语言项目,由于是在一个原有项目基础之 ...

  10. SQL脚本书写的几点建议

    1.索引很关键,创建合理的索引,提升查询速度:            DBCC FREEPORCCACHE       DBCC DROPCLEANBUFFERS                    ...