<!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. linux权限管理

    安全上下文:在linux系统中每个进程均以某个用户的身份运行,进程访问资源的权限取决于发起此进程的那个用户的权限 权限应用模型: 1)判断运行此进程的用户是否与被访问的资源的属主相同,如果相同,则运用 ...

  2. Popup - 弹出层

    //图片类快捷弹出层 <a href="" target="_blank"> <div class="panlifang1" ...

  3. Redis多机常用架构-sentinel

    哨兵经典架构 sentinel结构 哨兵工作原理 Sentinel 通过配置文件发现Master,如下: Sentinel 通过向Master发送 INFO 命令来自动获得所有Slave的地址 跟Ma ...

  4. springboot使用之三：springboot使用logback日志

    springboot 默认使用的日志就是logback,所以使用logback不需要添加日志相关依赖了,执行 添加logback.xml配置文件,springboot这个聪明的框架便能识处理你的配置. ...

  5. H5、CSS3属性的支持性以及flex

    一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

  6. GIT FLOW 时序图

    git flow sequence md link: git branching model master->master branch: use default branch Note rig ...

  7. pushState 和 replaceState

    使用此方法浏览器前进后退仍然可查看对应内容 设置值 history.pushState({}, "页面标题", "xxx.html"); history.rep ...

  8. vertica在电信的应用

    本文介绍了什么 ´ 电信级大数据分析典型需求 ´ Vertica数据库特点及与其他数据库对比 ´ Vertica核心技术介绍 ´ 基于Vertica的典型分系统架构简介 电信级大数据分析典型需求 ´  ...

  9. 'MAMapKit/MAMapKit.h' file not found

    1.应该是derived data没清导致的.在Window -> Organizer -> Projects,找到你这个项目,然后点下右边derived data后边的delete按钮. ...

  10. Gbase配置

    喵了个咪的.到目前为止,自己已经用过SQL SERVER,My SQL,Oracle,SQLite,加上南大通用GBASE 五种数据库了.虽然每种都用的不深 注:GBASE提供了C的API,查看手册即 ...