<!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. 如何把一个excel工作薄中N个工作表复制到另一个工作薄中

    一般遇到标题这样的情况,许多人可能会一个一个的复制粘贴,其实完全不必那么麻烦. 你可以按以下步骤来操作: 第一步:打开所有要操作的excel工作薄\n 第二步:按住Shift键,选择所有要复制的工作表 ...

  2. MAC系统下，删除.svn文件

    MAC系统下,.svn文件是隐藏的. 如果项目是非export导出的,那么项目中会有很多的.svn文件. 如果项目的体积非常庞大,我们如何快速的批量删除.svn文件呢?下面是操作方法: 打开终端,cd ...

  3. Ajax如何使用Session

    在Ajax中有时会使用到Session,在aspx.cs文件这样获取: string name = Session["name"]; 但是在Ajax中就不能这样获取Session, ...

  4. [Android Pro] Dangerous permissions and permission groups.

    Permission Group Permissions CALENDAR READ_CALENDAR WRITE_CALENDAR CAMERA CAMERA CONTACTS READ_CONTA ...

  5. Eclipse主题更改

    1. 直接安装color theme eclipse:Help->Install New Software->Work with:Update Site -http://eclipse-c ...

  6. SQL 映射的 XML 文件

    MyBatis 真正的力量是在映射语句中.这里是奇迹发生的地方. 对于所有的力量, SQL映射的 XML 文件是相当的简单.当然如果你将它们和对等功能的 JDBC 代码来比较,你会发现映射文件节省了大 ...

  7. Angular.JS

    AngularJS是什么? 完全使用 JavaScript编写的客户端技术.同其他历史悠久的 Web技术( HTML. CSS 和JavaScript)配合使用,使Web应用开发比以往更简单.更快捷. ...

  8. JS添加MD5，JS提示框

    http://pan.baidu.com/s/1kTmSp9t

  9. Redis笔记（七）Java实现Redis消息队列

    这里我使用Redis的发布.订阅功能实现简单的消息队列,基本的命令有publish.subscribe等. 在Jedis中,有对应的java方法,但是只能发布字符串消息.为了传输对象,需要将对象进行序 ...

  10. 【sicily】卡片游戏

    卡片游戏  Time Limit: 1sec    Memory Limit:32MB Description 桌上有一叠牌,从第一张牌(即位于顶面的牌)开始从上往下依次编号为1~n.当至少还剩两张牌 ...