<!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. javascript 学习总结（九）面向对象编程

    1.面向对象的工厂方法 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; ...

  2. sbt公布assembly解决jar包冲突 deduplicate: different file contents found in the following

    一个.问题定义 近期使用sbt战斗assembly发生故障时,包,在package什么时候,发生jar包冲突/文件冲突,两个相同class来自不同jar包classpath内心冲突. 有关详细信息:我 ...

  3. PHP中实现在数据库中的增、删、查、改

    其实要想在PHP中访问并获取到数据库中的数据其实并不难,下面我以例子为大家介绍: 首先,打开PHP软件和WampServer服务,确保在WampServer中的phpMyAdmin中有你要使用的数据表 ...

  4. [Framework Design Guideline]

    [Framework Design Guideline]基础知识 最近在读<Framework design guideline>, 感觉其中Framework的许多设计经验同样适用于业务 ...

  5. Android开发方法学

    这是Cyril Mottier最近更新的一篇文章,原谅地址在这里:Android开发方法学. 这篇文章是他介绍自己所在项目小组(Capitaine Train Android Team)设计.开发时的 ...

  6. 如何让Fortran生成不同的随机数

    用Fortran生成随机数的方法很简单,就是: call random_seed ()call random_number (rd) 生成随机数组可以这样: do k = 1,10 call rand ...

  7. 【推荐】30个Matlab视频教程合集（含GUI视频教程）下载

    自己收集别人网盘上存的资源,分享一下[点击文件名可得到下载地址]        Matlab 7.8 基础视频教程 实例1 数据传递和多窗口编程_avi.zip 205.11 MB   Matlab ...

  8. android判断网络的类型

    转自:http://blog.csdn.net/xxxsz/article/details/8199031 判断网络类型是wifi,还是3G,还是2G网络 对不同的网络进行不同的处理,现将判断方法整理 ...

  9. IOS UI 第三篇：基本UI

    工厂模式:   .h文件:   #import <Foundation/Foundation.h>typedef enum{    QFRed,    QFYellow,    QFBlu ...

  10. jQuery中的ready方法及实现按需加载css,js

    模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...