<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. List与Set的使用

    接口Collection: Collection是Java的一个集合框架, 也是一个根接口.JDK中没有提供此接口的任何实现,但是提供了更具体的子接口Set和List接口的实现,所有的Collecti ...

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

    1.一个物理层的网络,例如以太网,可以同时被多个不同的网络层所使用.例如网络中的一些主机使用TCP/IP协议,其他主机使用其他的网络协议. 2.设备驱动软件从不关心IP数据报中的目的IP地址.这也是为 ...

  3. 【MVC 4】8.SportsSore：管理

    作者:[美]Adam Freeman      来源:<精通ASP.NET MVC 4> 本文将继续构建 SportsStore 应用程序,为网站管理员提供一个管理产品分类的方法.本文将添 ...

  4. 【Android Demo】通过WebService获取今日天气情况

    因为本身是在搞.NET方面的东东,现在在学习Android,所以想实现Android通过WebService接口来获取数据,网上很多例子还有有问题的.参考:Android 通过WebService进行 ...

  5. hdu 1028 Ignatius and the Princess III 简单dp

    题目链接:hdu 1028 Ignatius and the Princess III 题意:对于给定的n,问有多少种组成方式 思路:dp[i][j],i表示要求的数,j表示组成i的最大值,最后答案是 ...

  6. Mybatis框架_part1

    mybatis介绍 mybatis就是一个封装了jdbc的持久层框架,它的前身是ibatis.Mybatis与hibernate一样都是持久层框架,但是它与hibernate不同的是,它不是一个完全的 ...

  7. [转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  8. POJ 1410 Intersection --几何，线段相交

    题意: 给一条线段,和一个矩形,问线段是否与矩形相交或在矩形内. 解法: 判断是否在矩形内,如果不在,判断与四条边是否相交即可.这题让我发现自己的线段相交函数有错误的地方,原来我写的线段相交函数就是单 ...

  9. Unity摄像机的正交视图与透视图

    Unity Camera的两种模式 Projection:投射,投影 Unity的MainCamera的Projection可选择Perspective[透视],Orthographic[正交],是指 ...

  10. SQL Server 2005 安装图解教程（Windows）

    因工作需要,好久未安装SQL Server2005,今天安装了一下,特此写下安装步骤留下笔记. 安装前准备: 先安装IIS,再安装SQL Server2005 一.安装 点击安装,如下图: 选择操作系 ...