<!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. 使用ShareSDK 时注意的问题

    1.使用ShareSDK 社会分享SDK(实现第三方登录) 1.QQ第三方登录时,如果是TencentSessionDelegate出现问题,或者是TencentApiInterface的框架出现问题 ...

  2. 谷歌CEO发布年度公开信：专注人工智能等6大业务领域

  3. Django-数据模型

    修改model.py文件 from django.db import models # Create your models here. class Question(models.Model): q ...

  4. CentOS 7编译安装gcc5.3碰到的坑

    下载最新的iso安装完毕后,发现gcc还是4.8版本的,就考虑升级到5.x 参考这个帖子 基本也没啥,但是执行download_prerequisites 时简直坑爹,三个压缩包都不超过2M 反复尝试 ...

  5. Spring Batch 中文参考文档 V3.0.6 - 1 Spring Batch介绍

    1 Spring Batch介绍 企业领域中许多应用系统需要采用批处理的方式在特定环境中运行业务操作任务.这种业务作业包括自动化,大量信息的复杂操作,他们不需要人工干预,并能高效运行.这些典型作业包括 ...

  6. 解决Win7下VC6.0插入ActiveX控件对话框为空的问题

    在Win7环境下,编写MFC应用程序,Project菜单下Add To Project子菜单中的 Components and Controls…选项,在弹出的对话框中Gallery文件为空,也就无法 ...

  7. 在android 6.0（API 23）中，Google已经移除了移除了Apache HttpClient相关的类

    推荐使用HttpUrlConnection,如果要继续使用需要Apache HttpClient,需要在eclipse下libs里添加org.apache.http.legacy.jar,androi ...

  8. eclipseMARS2.0使用可视化设计界面——配置window builder

    1.查看eclipse版本 不同版本的eclipse对应不同的版本window builder,如果不知道版本的话可以通过,点击HELP——>about eclipse来查看自己eclipse的 ...

  9. NTP服务配置

    一.NTP简介 在计算机的世界里,时间非常地重要,例如对于火箭发射这种科研活动,对时间的统一性和准确性要求就非常地高,是按照A这台计算机的时间,还是按照B这台计算机的时间?NTP就是用来解决这个问题的 ...

  10. Linux Ubuntu上手动安装.NET Core SDK

    今天重装了一台Linux服务器的Ubuntu 14.04系统,需要重新安装.NET Core 1.0. 按照官网上的文档用apt-get命令进行安装: sudo sh -c 'echo "d ...