<!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. js时间处理函数

    Date 对象的方法简介: ·Date    | 返回当日的日期和时间 ·getDate | 从 Date 对象返回一个月中的某一天 (1 ~ 31) ·getDay | 从 Date 对象返回一周中 ...

  2. [转]JavaScript字符串函数大全

    JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...

  3. Sublime Text 3专题

    MarkDown语法记笔记 1.下载&&安装 下载 常用插件安装 Submlit使用教程 [如何优雅地使用Sublime Text3] 2.Sublime Text 便捷技巧 [以PH ...

  4. HTML5-样式

    外部样式,内部样式,内链样式 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...

  5. 《利用Python进行数据分析》第7章学习笔记

    数据规整化:清理.转换.合并.重塑 合并数据集 pandas.merge pandas.concat combine_first 数据库风格的DataFrame合并 索引上的合并 join()实例方法 ...

  6. mysql5.7 代价模型浅析

    代价模型 mysql 5.7.10代价计算相对之前的版本有5.7 代价模型浅析较大的改进.例如 代价模型参数可以动态配置,可以适应不同的硬件 区分考虑数据在内存和在磁盘中的代价 代价精度提升为浮点型 ...

  7. MySQL数据库有外键约束时使用truncate命令的办法

    MySQL数据库操作中,Delete与Truncate两个命令都可以删除一个数据表中的全部数据,使用办法分别是: DELETE FROM t_question TRUNCATE TABLE t_que ...

  8. 从现在开始，使用简单优雅的validata.js

    表单验证,是后台开发中万年不变的话题,在经历许多实战之后发现 使用优雅便捷的validate.js实现验证实在是一件非常愉悦的事情 <form data-validate> Enter: ...

  9. nsq初探

    一. 安装 参考:http://nsq.io/deployment/installing.htmlhttp://www.baiyuxiong.com/?p=873    (推荐.) 不推荐直接把官方的 ...

  10. UWP的一种下拉刷新实现

    简介 我们最近实现了一个在UWP中使用的下拉刷新功能,以满足用户的需求,因为这是下拉刷新是一种常见的操作方式,而UWP本身并不提供这一机制. 通过下拉刷新这一机制,可以让移动端的界面设计变得更加简单, ...