<!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. 非接触式电子音乐控制器CHIMAERA

    本篇文章,我将介绍个有意思的设备. 她就是Chimaera,一个基于电磁场效应的非接触式电子音乐控制器. <弹奏Chimaera的声音> 霍尔效应传感器阵列及其周围部件组成了一个连续的2D ...

  2. 一般处理程序装配数据到html页的原理

    相应html页面并保存状态输出原理:(有状态请求)请求页面提交给后台,获取值进行处理之后再根据name标记读取原html文件文字将值替换再一并返回给页面:(在response时替换)比如原模板< ...

  3. 如果gen.lib.rus.ec这个电子书下载站上不去了，那就用这个吧

    如果著名的gen.lib.rus.ec这个电子书下载站上不去了,那就用这个吧: 万千合集站 http://www.hejizhan.com/ 里面除了镜像索引了gen.lib.rus.ec上的所有英文 ...

  4. NPOI封装

    一.对于Excel的操作封装主要针对对于Excel的写入的封装,对于打印基类的封装主要引入了两个概念 1.打印区域模板类 2.打印集合类 如实例模板中需要打印的区域模块 如实例模板中需要打印的集合类 ...

  5. 建立Ftp站点

    建立Ftp站点步骤: 1.首先创建一个用户 我的电脑右键->管理->本地用户和组->用户->“右键”新建用户->输入用户名和密码再点创建就行了! 2.其次是在C盘新建文件 ...

  6. C#有意思的算法题

    年底了,特贡献一些C#有意思的算法题   2013年,即将要过去了.屌丝C#程序员们拿到了年终奖不?是不是又想蠢蠢欲动了?是不是想通过跳槽来为自己实现加薪的梦想?好吧,跳槽之前还是做点准备吧,准备好C ...

  7. FineUI开源版之TreeGrid（修改）

    上篇文章中做了简单实现,但是还是有bug的,还需要在外面写事件的处理,今天又进行修改了. 下面放出代码,同样的  hzh modify标记的就是我进行修改的地方 grid.cs 添加代码 #regio ...

  8. .NET4.5 Console.ReadKey()在多线程下的BUG

    .NET 4.5 在多线程的控制台里,Console.ReadKey()可能会造成线程死锁.看代码: static void Main(string[] args) { System.Timers.T ...

  9. IOS学习之路二十四（custom 漂亮的UIColor）

    下面简单列举一下漂亮的和颜色,大家也可以自己依次试一试选出自己喜欢的. 转载请注明 本文转自:http://blog.csdn.net/wildcatlele/article/details/1235 ...

  10. requestScope含义

    requestScope表名一个http请求的整个生命周期,它只是一个定义而已,不是一个对象. ${requestScope.info}就等价于request.getAttribute("i ...