<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. SDRAM总结

    使用的流程 W9825G6JH winbond sdram 4M words X 4banks X 16bits=. Accesses to the SDRAM are burst oriented. ...

  2. 使用nmon监控服务器性能

    1.下载nmon:http://nmon.sourceforge.net/pmwiki.php?n=Site.Download 2.选择适合Linux系统版本的相应nmon版本,Linux查看系统版本 ...

  3. HDU 4419 Colourful Rectangle --离散化+线段树扫描线

    题意: 有三种颜色的矩形n个,不同颜色的矩形重叠会生成不同的颜色,总共有R,G,B,RG,RB,GB,RGB 7种颜色,问7种颜色每种颜色的面积. 解法: 很容易想到线段树扫描线求矩形面积并,但是如何 ...

  4. Unity抗锯齿

    Unity抗锯齿设置是针对模型,对模型的阴影的锯齿设置无效,不知道我这样的理解是否正确. 遇到的问题 而我是要对灯光照射在模型上产生的阴影进行抗锯齿,暂时还未研究出解决方案,希望知道的朋友告知一声. ...

  5. js知识体系的梳理一

    今天简单的总结了js的一些东西,梳理下整个体系,每一次的总结都会有不同的收获:js总结一一.[获取元素]: 1.通过ID: var oBtn=document.getElementById('btn1 ...

  6. UOJ 151 斗地主“加强”版

    #151. [NOIP2015]斗地主“加强”版 统计 描述 提交 自定义测试 本题开放Hack 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54 ...

  7. U3D事件系统总结

    事件系统有三个要素:发送者,接收者, 转发者. 发送者有两种,一是相机,二是画布.发送者是事件的管理者,发起者,它们使用射线发射器来检测点击事件: 相机的physics Raycaster. 画面的C ...

  8. js中的预加载与懒加载（延迟加载）

    js中加载分两种:预加载与延迟加载 一.  预加载,增强用户的体验,但会加载服务器的负担.一般会使用多种 CSS(background).JS(Image).HTML(<img />) . ...

  9. IBatis.net介绍

    IBatis.net介绍 IBatis.net 是2001年发起的开源项目,它是一个轻量级的ORM框架,现在IBatisNET已经是属于Apache下的一个子项目了,最新版本是1.6.2. 官方网站: ...

  10. ActionBar在Android2.x的实现，类似新版微信界面。

    ActionBar完美兼容Android4.x的机型,虽然现在Android2.x的系统越来越少,还有有一部分人使用的仍是2.x的系统,所以我们还得考虑着兼容性问题. 对比图: Test例子与微信的对 ...