<!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. 邮箱自动完成（jquary效果）

    邮箱自动完成的效果在网站上大多都看过,但是质量参差不齐,今天突然在网上看到一篇博客,感觉这个插件很好,就想来写一下分享给大家! 效果图如下! 完整demo代码如下: <!DOCTYPE html ...

  2. 一个web开发框架

    一个web开发框架 怎么才能成为一名架构师?需要具备哪些条件? 作为一名码农我迫切希望自己成为一个比较合格的web架构师,昨晚心血来潮小弟花了4个小时的时间整了个简易的web开发框架,由于第一次搭建框 ...

  3. Xamarin.Android学习之应用程序首选项

    Xamarin.Android学习之应用程序首选项 一.前言 任何App都会存在设置界面,如果开发者利用普通控件并绑定监听事件保存设置,这一过程会非常的枯燥,而且耗时.我们可以看到Android系统的 ...

  4. jquery 触屏滑动+定时滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. C# 求精简用一行代码完成的多项判断 重复赋值

    C# 求精简用一行代码完成的多项判断 重复赋值 哈哈,说实话,个人看着这么长的三元操作也麻烦,但是我也只想到了这样三元判断句中执行方法体能够写到一行,追求的终极目的是,用一行实现这个过程,而且简单,由 ...

  6. soket.io.js + angular.js + express.js(node.js)

    soket.io.js + angular.js + express.js(node.js) 今天搭建个soket.io.js + angular.js + express.js的环境, 采坑无数,特 ...

  7. PureMVC(JS版）源码解析

    PureMVC(JS版)源码解析:总结   PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写 ...

  8. AJAX异步提交，浏览器总跳出下载界面

    问题: 我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将 用户名密码传到后端,然后后端返回验证结果.但AJAX写好后每次刷新网页都会跳出下载窗口, ...

  9. Oracle中复制表结构和表数据

    一.复制表结构及其数据 create table new_table as (select * from old_table); 二.只复制表结构 create table new_table as ...

  10. struts1 logic:iterate bean:write标签使用

    只是截取项目中部分代码,供参考及日后查阅 用struts1标签html:select 展现select下拉列表 刚开始为如下代码: <html:select name="Shuiwuj ...