闲扯 Javascript 01 实现选项卡
javascript 实现选项卡
今天下午的两节课，在机房闲来没事 ，就学习了javascript 怎么获取HTML的标签，改变CSS样式，资料来源 智能社！
<script> window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
// alert(this.value);
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
};
} }; </script>
<body>
<div id="div1">
<input class="active" type="button" value="A" />
<input type="button" value="B" />
<input type="button" value="C" />
<input type="button" value="D"/> <div style="display:block"> 1月</div>
<div> 2月2月2月2月2月</div>
<div> 3月3月3月3月3月3月</div>
<div> 4月4月4月4月4月4月</div> </div> </body>
<style>
#div1 .active{ background:#FFFF00;}
#div1 div{ width:150px; height:200px; background:#CCCCCC; border:1px solid #CCCCCC; display:none;}
</style>
闲扯 Javascript 01 实现选项卡的更多相关文章
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- JavaScript效果之选项卡
拼了命学习js,想把学到的Javascript效果,可以记在博客里,在记录过程中,加深理解. gogogo,第一个效果,选项卡. 一.选项卡效果的实现思路 选项卡效果的应用很广泛,几乎所有的网站都会用 ...
- javascript与jQuery选项卡效果
HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...
- javascript简单的选项卡
实现一个简单的选项卡功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 用JavaScript实现的选项卡
Codes wins arguments! <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 闲扯 Javascript 00
引言 Javascript 的作用在此就不阐述了,相信你已经知道它的用途!那我说点什么呢? 不如就和大家先扯一把,后面的工作 随后后展开吧! 首先声明:我个人对Javascript 认识,我只知道它 ...
- 初识 Javascript.01 -- Javascript基础|输出方式、变量、变量命名规范、数据类型、
Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司 研发出世界上第一款浏览器. 95年 sun公司 java语言诞生 网景公司和su ...
随机推荐
- DevExpress ASP.NET 使用经验谈（2）-XPO对象的使用(使用默认数据连接)
接下来,我们通过一个控制台应用程序,介绍XPO对象的保存操作. 图一 添加新项目 图二 选择项目类型为控制台应用程序 查看生成的Program.cs代码文件,代码如下: using System; u ...
- linux下出现java.net.UnknownHostException
项目部署在win环境下没问题,但是在迁移生产环境的时候出现Java.net.UnknowHostException 原因在于etc/hosts 文件没有配置域名映射,使用vi编辑器加上服务器ip 以及 ...
- OCP-1Z0-053-V13.02-712新题
Why does the number of blocks for the table remain the sale after the shrink operation? A.Because ...
- Oracle语句优化规则(一)
1. 选用适合的ORACLE优化器 ORACLE的优化器共有3种: a. RULE (基于规则) b. COST (基于成本) c. CHOOSE (选择性) 设置缺省的优化 ...
- ASP.NET PipeLine #Reprinted#
从ASP.NET 1.0 起,相比于ASP中的COM, PipeLine 就是一项重大的改进. ASP.NET 时代的管道模型究竟是怎么样的? 我们能接触到的四个最重要的概念就是HttpApplica ...
- （IOS）CoreLocation 和 MapKit 的应用
CoreLocation是控制GPS硬件获取地理坐标信息的系统类库,而MapKit是系统地图的工具包,将两者结合使用可以实现不同的地图功能. 1.CoreLocation 在CoreLocation中 ...
- Xamarin.Android开发实践（三）
原文:Xamarin.Android开发实践(三) 一.前言 用过Android手机的人一定会发现一种现象,当你把一个应用置于后台后,一段时间之后在打开就会发现应用重新打开了,但是之前的相关的数据却没 ...
- ios7下二维码功能的实现
苹果公司升级到IOS7后自己的PassBook自带二维码扫描功能,所以现在使用二维码功能不需要在借助第三方库了 使用前请先导入AVFoundation.frameWork // // YHQView ...
- 数据结构——AVL平衡树
1.是二叉搜索树(Binary Search Tree) 2.树和所有左右子树高度之差为-1,0,1 平衡因子(balance factor) =右子树高度-左子树高度 平衡化旋转: 1.从插入位置向 ...
- android面试题之三
十一.对一些资源以及状态的操作保存,最好是保存在生命周期的哪个函数中进行? 若在onPause()中进行保存,相应需要在onResume()中进行恢复. 若在onStop()中进行保存,相应需要在on ...