<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
.x input{background:white;}
.x input.active{background:red;}
.x div{width:200px;height:100px;border:1px solid blue;display:none;}
</style>
<script>
window.onload=function(){
　　　　var divX=document.getElementById("div1");
　　　　oBut=divX.getElementsByTagName("input");
　　　　oDiv=divX.getElementsByTagName("div");
　　　　for(var i=0;i<oBut.length;i++){
　　　　　　oBut[i].index=i;
　　　　　　oBut[i].onclick= function(){
　　　　　　for(var i=0; i<oBut.length;i++){
　　　　　　oBut[i].className='';
　　　　　　oDiv[i].style.display="none";
　 　}
　　　　　　this.className="active";
　　　　　　oDiv[this.index].style.display='block';
　　　　}
　　}
};
</script>
</head>
<body>
<div class="x" id="div1">
<input class="active" type="button" name="" value="财经">
<input type="button" name="" value="体育">
<input type="button" name="" value="社会">
<div style="display:block">俄罗斯卢布暴跌物价上涨 居民抢购生活物资 专题</div>
<div>小罗为亨利送上祝福 球场拥抱基情满满</div>
<div>佳木斯设假警察保卫政府大楼 称上访人员管不住</div>
</div>
</body>
</html>

js选项卡的更多相关文章

  1. js 选项卡制作

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

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

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

  3. js 选项卡实现

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

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

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

  5. js选项卡切换效果

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

  6. js 选项卡

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

  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. 第十四章：降维：奇异值分解SVD

  2. 【dubbo】zookeeper搭建

    依赖java JDK,需提前安装1.6及以上版本 1.下载zookeeper (3.4.9) 2.设置配置文件\zookeeper-3.4.9\zookeeper-3.4.9\conf\zoo.cfg ...

  3. 第五章GPIO接口

    5.1 GPIO硬件介绍 可以不通过他们输出高低电平或者通过它们读入应交的状态 S3C2410有117个I/O端口,分为A~H共8组:GPA.GPB....GPH S3C2440有130个I/O端口, ...

  4. 我的iOS之路2

    第一篇果然没人看呢...好吧...那就当笔记做吧...第一篇主要写的是生成了一个helloworld,可能也是和别人撞了,所以有点厌烦,连名字都改掉吧 好,开始写第二篇 之前做第一个应用程序的时候没有 ...

  5. Java学习笔记一——安装JDK并配置环境变量

    下载安装JDK1.8 在官网上下载JDK,官网地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213 ...

  6. VC CComboBox用法总结

    VC每日一练,虽然简单,不动手试一下不能真正记住. 大气象 CComboBox *comboBox=(CComboBox*)GetDlgItem(IDC_COMBO1); comboBox->I ...

  7. IO-04. 混合类型数据格式化输入(5)

    本题要求编写程序,顺序读入浮点数1.整数.字符.浮点数2,再按照字符.整数.浮点数1.浮点数2的顺序输出. 输入格式: 输入在一行中顺序给出浮点数1.整数.字符.浮点数2,其间以1个空格分隔. 输出格 ...

  8. spark on centos6.5 安装

    第一步在centos 6.5上安装java 运行环境 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-18 ...

  9. C++混合编程之idlcpp教程Lua篇(7)

    上一篇在这 C++混合编程之idlcpp教程Lua篇(6) 第一篇在这 C++混合编程之idlcpp教程(一) 与LuaTutorial4工程相似,工程LuaTutorial5中,同样加入了四个文件: ...

  10. [MySQL][Spider][VP]Spider-3.1 VP-1.0 发布

    我很高兴的宣布 Spider 存储引擎 3.1 Beta 版本和垂直分区存储引擎 1.0 Beta 版本发布了. Spider 是数据库拆分的存储引擎: http://spiderformysql.c ...