<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
    *{
       margin:0;
       padding: 0;
    }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            text-align: center;
            line-height: 200px;
            display: none;
        }
        #div1{
            display: block;
        }
        button{
           display: inline;
           width: 100px;
           height: 20px;
           margin-right: -4px;/*去掉多个按钮之间默认的间距*/
        }
    </style>
    <script>
        window.onload=function(){
            var aInput=document.getElementsByTagName('button');
            var oDiv=document.getElementsByTagName('div');
            var n=0;
            for(var i = 0;i < aInput.length;i++){
                aInput[i].index=i;
                aInput[i].onclick=function(){
                    aInput[n].style.background="";//先把下标为0的按钮背景颜色清空
                    oDiv[n].style.display="none";
                    this.style.background="red";//点击当前的按钮，给当前按钮一个红色背景
                    oDiv[this.index].style.display="block";
                    n=this.index;
                }
            }
        }
    </script>
</head>
<body>
        <button style="background: red;"/>tab1</button>
        <button>tab2</button>
        <button>tab3</button>
        <div id="div1">
           我是tab1里的内容
        </div>
        <div>
           我是tab2里的内容
        </div>
        <div>
           我是tab3里的内容
        </div>
</body>
</html>

tab切换☆☆☆☆☆的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

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

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

  3. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  4. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  5. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  6. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

  8. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  9. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  10. tab切换-2016.6.4

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

随机推荐

  1. Cocos2d-x在Android在竖屏切换

    在Cocos2d-x在,屏幕类型的默认设置是横屏,当我们需要切换到肖像,能够在项目目录打开proj.android目录.找到AndroidManifest.xml文件,直接打开,然后就可以看到里面:s ...

  2. 通过SqlClr制作Sql自动化批量执行脚本

    原文:通过SqlClr制作Sql自动化批量执行脚本 通过SqlClr制作Sql自动化批量执行脚本 在与同事一起做项目时,看到同事用sqlclr做批量执行脚本,感觉挺新奇的就上网搜集资料自己模仿跟做了个 ...

  3. QTP中DataTable操作大全

    序曲 假设现在有一个Excel文件:D:\data.xls,里面的具体内容如下:有两个Sheet,第一个叫Login,第二个叫InsertOrder: 当前QTP的Test中有两个Action:Log ...

  4. Date与SimpleDateFormat

    Date常用的方法 返回类型 方法名称 备注 Date New Date() 创建当前日期对象 Date New date(long dt) 使用自1970.1.1以后的指定毫秒数创建日期 boole ...

  5. C#函数式程序设计之泛型（下）

    C#函数式程序设计之泛型(下)   每当使用泛型类型时,可以通过where字句对泛型添加约束: + 这个例子直观地声明了一个约束:类型T必须与ListItem<string>相匹配.泛型类 ...

  6. Kraken.js!

    Hello Kraken.js! 前言 kraken.js 由paypal 公司开源的一个用于快速开发基于Express.js框架应用的快速开发工具, 因为kraken 并没有在Express.js基 ...

  7. 10.26最后的模拟DAY2 数字对[暴力]

    数字对 [题目描述] 小H是个善于思考的学生,现在她又在思考一个有关序列的问题. 她的面前浮现出一个长度为n的序列{ai},她想找出一段区间[L, R](1 <= L <= R <= ...

  8. java的几种对象解释

    一.PO:persistent object 持久对象,可以看成是与数据库中的表相映射的Java对象.最简单的PO就是对象数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何数据 ...

  9. 自定义的UIAlertView不能在iOS7上正常显示

    众所周知,当伟大的iOS7系统发布后,表扬的一堆.谩骂的也一片,而对于我们程序员来说最关心的莫过于低版本系统上的程序在搞版本系统上的兼容性问题了. 在iOS6.1几之前,当我们想要做一些提醒用户或临时 ...

  10. 基于easyui的webform扩展

    基于easyui的webform扩展 回顾 <前端基于easyui的mvc扩展>.<前端基于easyui的mvc扩展(续)>前两篇介绍了mvc内如何基于easyui进行扩展,在 ...