<!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. MAC系统下，删除.svn文件

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

  2. qt编译mysql插件

    安装MySQL,C:\Program Files (x86)\MySQL\MySQL Server 5.7,然后把include和lib文件夹拷贝到C盘,因为qmake不允许路径中有空格!!! 安装Q ...

  3. nohup命令

    nohup就是不挂起的意思( n ohang up). .nohup command 或者 nohup command & 这之间的差别是带&的命令行,即使terminal(终端)关闭 ...

  4. R语言入门小练习

    要求:模拟产生统计专业同学的名单(学号区分),记录数学,线代,英语三科成绩 > num <- seq(1513032001, 15130320100)                 #模 ...

  5. 对于类的双重调用的demo

    代码如下: package cao.com.duixiang; public class TestCCircle { public static void main(String[] args) { ...

  6. 忘记Mysql登录密码

    1,使用安全模式跳过验证: 如果 Mysql在运行,Kill掉. 如果mysqld_safe无法启动,可用管理员权限sudo . 2,本地登录: 启动Mysql 3,修改密码: 5.7之后, 更改密码 ...

  7. java 设置允许ajax XMLHttpRequest 请求跨域访问

    怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域. 方案1: 使用XMLHttpRequest...  异步请求不能跨域访问,除非要访问的网页响应头信息设置为允许跨域访问. 将网页设置为允许 ...

  8. 优化MyBatis配置文件中的配置

    一.为实体类定义别名,简化sql映射xml文件中的引用 之前,我们在sql映射xml文件中的引用实体类时,需要写上实体类的全类名(包名+类名),如下: <!-- 创建用户(Create) --& ...

  9. iOS - 二维码扫描和应用跳转

    序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如ZXing或者ZBar.使用时集成麻烦, ...

  10. Apache commons-codec笔记