<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div2 div{
    width:500px;
    height:300px;
    background:#999;
    border:1px solid black;
    display:none;
}
#div1 input{
    width:50px;
    height:30px;
    border:none;
}
.bgcolor{
    background:blue;
}
</style>
<script>
window.onload=function()//执行JS之前，要保证默认（第一个）按钮有class属性，并且按钮对应选显卡的display属性为block
{
    var oDiv=document.getElementById('div1');
    var aBtn=oDiv.getElementsByTagName('input');//提取按钮的数组
    var oDiv1=document.getElementById('div2');
    var aDiv=oDiv1.getElementsByTagName('div');//提取选项卡的数组
    for(var i=0;i<aBtn.length;i++)//外层循环用来给每个按钮添加事件
    {
        aBtn[i].onclick=function()//添加事件
        {
            for(var i=0;i<aBtn.length;i++)//内层循环
            {
                aBtn[i].index=i;//给数组添加序列号
                aBtn[i].className='';//在执行事件之前将所有input的class属性清空
                aDiv[i].style.display='none';//在执行事件之前将所有选项卡的display属性改为none
            }
            this.className='bgcolor';//清空完之后，让this（当前发生事件的按钮）的class属性重新定义
            aDiv[this.index].style.display='block';///清空完之后，让发生事件所对应按钮的选项卡display属性定义为block
        }
    }
}
</script>
</head>
<body>
<div id="div1">
    <input class="bgcolor" type="button" value="新闻"/>
    <input type="button" value="体育"/>
    <input type="button" value="财经"/>
    <input type="button" value="军事"/>
</div>
<div id="div2">
    <div style="display:block;">新闻啊新闻，好新啊好新</div>
    <div>体育啊体育，好体啊好体</div>
    <div>财经啊财经，好财啊好财</div>
    <div>军事啊军事，好军啊好军</div>
</div>
</body>

js 选项卡实现的更多相关文章

  1. js 选项卡制作

    知识回顾,制作JS选项卡,仅供参考 html代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. 慕课编程题JS选项卡切换

    Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...

  3. 原生JS 选项卡代码实现

    可实现同页面多个选项卡 效果图: 代码实现: HTML部分 <div class="main" id="tabs"> <div class=& ...

  4. js选项卡切换效果

    选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...

  5. js 选项卡

    <html><head lang="en"> <meta charset="UTF-8"> <title>Tab ...

  6. js选项卡

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  8. 原生js选项卡

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js 选项卡封装

    function tab(input,div){ for(var i = 0; i < input.length; i++){ input[i].index = i; input[i].oncl ...

随机推荐

  1. 计算机中的颜色XIV——快速变换颜色的V分量

    基本知识回顾: 计算机中的颜色Color,用RGB模式存储(用R.G.B三个分量表示颜色,每个分量的范围是0—255). 而计算机中的颜色除了用RGB模式表示以外,常见的还有HSV模式(或者是HSB. ...

  2. 《TCP/IP详解 卷一》读书笔记-----第三章 IP

    1.Network byte order:数据在网络中的传输是按照大端模式来的,即如果需要传递一个四个字节的int变量,先传递最高的字节,然后依次类推.因此无论主机存储数据用的是大端模式还是小端模式, ...

  3. 作为一个测试leader平时应该注意哪些方面

    平时对管理方面很少有总结,总觉得管理是一门艺术,一门需要意会的艺术,虽然目前在做测试leader,平时也看些管理方面的书,但实际中总感觉理解的不够透彻,在工作上实施的话会有各种各样的情况,想要做好管理 ...

  4. java 15- 5 List集合

    需求 1:List集合存储字符串并遍历.(步骤跟Collection集合一样,只是最初创建集合对象中的集合类改变了,Collection变成List) List集合的特点: 有序(存储和取出的元素一致 ...

  5. [Elixir008]Nested Module里的动态函数调用方式

    有时我们需要动态生成一些模块名,然后调用它里面的函数.但是我们常常碰到的却是明明有那个模块,结果还是raise模块未定义... 我们来看看到底怎么回事? 首先我们定义一个函数 iex(1)> d ...

  6. [tools] Sublime text 3 神器

    同事给了一个Sublime text 3 增强优化版.<---神器   问题:中文文件名乱码:[因为我电脑调整了dpi] 解决: 在sublime text 3中,Preference, Set ...

  7. c语言 数组名是常量指针

    //数组名是常量指针 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include ...

  8. select、poll、epoll程序实例

    三个函数的基本用法如下: select 创建 fd_set rset , allset; FD_ZERO(&allset); FD_SET(listenfd, &allset); 监听 ...

  9. nginx缓存模块配置总结proxy_cache（未完）

    简介:此缓存设置用到了第三方模块purge,使用的时候就在源链接和访问的具体内容之间加入关键字"/purge/"即可. 如:访问http://192.168.0.1/a.png 会 ...

  10. pandas 数据索引与选取

    我们对 DataFrame 进行选择,大抵从这三个层次考虑:行列.区域.单元格.其对应使用的方法如下:一. 行,列 --> df[]二. 区域   --> df.loc[], df.ilo ...