<!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. VMware 克隆 Linux 系统后找不到 eth0 网卡问题（转）

    [问题描述] 使用 VMware 虚拟机的克隆功能,快速复制已安装好的 Linux 系统. 克隆完成之后,发现没有 eth0 网卡. [解决方法] 1. 编辑 /etc/udev/rules.d/70 ...

  2. PostgreSQL和MYsql的对比

    一.postgresql多进程,mysql多线程 二.postgresql和它配套的开源软件非常多,容易进行负载均衡 三.posgresql代码简介,mysql比较混乱 四.最重要的,postgres ...

  3. NFS 网络文件系统挂载在A8板子上

    我承认自己是菜鸟,没什么网络知识就来搞挂载nfs网络文件系统,花费了5天的时间才把nfs网络文件系统成功挂载在A8板子上,实现了A8板子和虚拟机的文件共享.分享一下个人经验: 以下是基于nfs已经完成 ...

  4. Codeforces #380 div2 B(729B) Spotlights

    B. Spotlights time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  5. js获取select标签选中的值

    <p>        城市:         <select id="Select1" name="D1">            &l ...

  6. usage of elinks (命令行下的firefox)

    No.0 Press "Esc" to show main menu ============================================= No.1 tyep ...

  7. android 开发禁止系统修改app的字体大小

    重写activity的getResources方法,一般在BaseActivity中重写就好了,其他activity继承BaseActivity //设置字体大小不随手机设置而改变 @Override ...

  8. JavaScript 基础第五天

    一.引言 前面我们讨论了函数的一些基本概念,因为函数在任何一门语言之中都是很重要所以还是要好好学.昨天打开博客的时候看到有人私信我的JavaScript写错了,我定睛一看果然写错了.对此我表示很抱歉, ...

  9. Win10 设置外网多用户远程桌面连接

    主要原理:利用路由器的虚拟服务器功能,将内网的Ip地址通过端口映射提供给外网,使得外网能够访问到目的主机. 1. 配置路由器上的虚拟服务器,假设目的主机内网的ip为192.168.1.100,则配置如 ...

  10. UNITY 状态机 + SVN + 码云 下篇

    上篇说到自己写的一个FSM状态机,这篇写怎么把代码和码云联系在一起! 首先,我们应该知道为什么使用码云? 码云是开源中国社区2013年推出的基于 Git 的完全免费的代码托管服务,这个服务是基于 Gi ...