<一>初探js特效魅力之选项卡05
初探js特效魅力05
接下来为大家介绍的选项卡的切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->
<style>
#div1 .active{
background:pink;
}
#div1 div{
width:200px;
height:200px;
border:1px solid black;
background:pink;
display:none;
}
</style>
<script>
window.onload=function(){
var div1=document.getElementById("div1");
var oBtn=div1.getElementsByTagName("input");
var oDiv=div1.getElementsByTagName("div");
for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
for(var i=0;i<oBtn.length;i++){
oBtn[i].className='';
oDiv[i].style.display='none';
}
this.className='active';
oDiv[this.index].style.display="block";
}
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" class='active' value="教育" id="btn1"/>
<input type="button" value="培训" id="btn2"/>
<input type="button" value="出国" id="btn3"/>
<input type="button" value="其他" id="btn3"/>
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
<div>4444</div>
</div>
</body>
</html>
未完待续,请继续收看初探js特效魅力06
<一>初探js特效魅力之选项卡05的更多相关文章
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...
- JS的魅力
一.初探JavaScript魅力 基本知识: JavaScript是什么 网页特效原理 -JavaScript就是修改样式 编写JS流程 - 布局:HTML + CSS - 属性:确定修改哪些属性 - ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- 滚动变色的文字js特效
Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...
- 150个JS特效脚本
收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 鼠标经过显示二级菜单的js特效
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- 又到圣诞节,让你的网页下起雪(js特效)
又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
随机推荐
- 2015 UESTC Training for Search Algorithm & String - M - Palindromic String【Manacher回文串】
O(n)的复杂度求回文串:Manacher算法 定义一个回文值,字符串S是K重回文串,当且仅当S是回文串,且其长度为⌊N/2⌋的前缀和长度为⌊N/2⌋的后缀是K−1重回文串 现在给一个2*10^6长度 ...
- 使用CSS、JS的几种方法
引用CSS到html网页里的4种方法 1.行内式 在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用 <div style="widt ...
- Mediator 中介者 协调者模式
简介 定义:用一个[中介者对象]封装一系列的[对象交互],中介者使各对象不需要显示地相互作用,从而使耦合松散,而且可以独立地改变它们之间的交互. 中介者模式的结构 抽象中介者Mediator:定义好[ ...
- UIScrollView设置了contentSize后还是没办法滚动?
1.最常见的原因是 contentSize 这个属性,比uiscrollview的frame要小, 无需滚动, 自然就滚动不了. scrollenabled 这个属性,标识着是否允许滚动,要言设成ye ...
- Ext Sencha Cmd 6 环境安装
Sencha Cmd安装笔记 在使用前端框架ExtJs前,需对其环境加以部署,对自己的安装过程加以记录. 建议大家在安装时,最好使用VPN,个中缘由,生在跳槽的程序袁应该都懂吧.不然ruby相关命令执 ...
- [转]Traits 编程技法+模板偏特化+template参数推导+内嵌型别编程技巧
STL中,traits编程技法得到了很大的应用,了解这个,才能一窥STL奥妙所在. 先将自己所理解的记录如下: Traits技术可以用来获得一个 类型 的相关信息的. 首先假如有以下一个泛型的迭代器类 ...
- 不同浏览器对parseInt方法解析的不同
parseInt方法的作用是将字符串转换为数字 当parseInt解析的时候只有0x和非0开头的数字,浏览器解析都一致,例如”0xA1”或 “9”. 只有当开头为0的时候才出现不同.IE,chrome ...
- eclipse慢 优化(转)
1.打开 eclipse.ini -showsplash com.genuitec.myeclipse.product --launcher.XXMaxPermSize 256M -vmargs -D ...
- QComboBox实现复选功能
需求: 下拉列表有复选功能 不可编辑 显示所有选中项 关于QComboBox的复选功能有几种方案: QStandardItemModel + QStandardItem QListWidget + ...
- Dede 查询附加表
<!--使用dede:arclist取出信息 dede_archives 表 $sql="Select 字段 from dede_archivies",但是在默认情况下 de ...