<一>初探js特效魅力之选项卡05
2013-10-07 21:05
375 查看
初探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>
[b]未完待续,请继续收看初探js特效魅力06[/b]
接下来为大家介绍的选项卡的切换
<!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>
[b]未完待续,请继续收看初探js特效魅力06[/b]
相关文章推荐
- <一>初探js特效魅力之选项卡05
- <一>初探js特效魅力之全选不选反选04
- <一>初探js特效魅力之全选不选反选04
- <一>初探js特效魅力之数组06
- <一>初探js特效魅力之鼠标悬浮事件01
- <一>初探js特效魅力之div显示隐藏变色02
- <一>初探js特效魅力之函数传参03
- 初探js特效魅力之“分享到”侧边栏
- 初探js特效魅力之延时提示框07
- 初探js特效魅力之定时器的使用one
- Unity编辑器拓展<一>
- <一>对比各类数据库连接命令
- < 笔记 > Git - 05 Git 远程仓库
- <Js>修改样式
- <input type = "submit"> 提交方式和用js的form.submit()有什么区别?
- <一>Linux文件权限与属性详解--一般权限
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
- < 笔记 > Python - 05 Python 函数式编程
- 关于如何使用three.js的小教程<一>
- js对<select><option>操作和jq的选择器