您的位置：首页 > Web前端 > JavaScript

javascript小实例【第二课时笔记】

2013-05-03 23:58 351 查看

<!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=gb2312" />
<title>选项卡切换</title>
<style>
.active{background:red;}
div{width:100px;height:100px;background:#0000FF;display:none;}
input{background:#CCCCCC;}
</style>
<script>
window.onload=function(){
var ainput=document.getElementsByTagName('input');
var odiv=document.getElementsByTagName('div');
var i=0;
for(i=0;i<ainput.length;i++){
ainput[i].index=i;
ainput[i].onclick=function()
{
for(i=0;i<ainput.length;i++){
ainput[i].className='';
odiv[i].style.display='none';
}
odiv[this.index].style.display='block';
this.className='active';
};
}
};
</script>
</head>
<body>
<input class="active" type="button"  value="one"/>
<input type="button"  value="two" />
<input type="button"  value="three"/>
<div style="display:block;">我是第一个</div>
<div>我是第二个</div>
<div>我是第三个</div>
</body>
</html>

这个是选项卡的切换原理，做的一个简单的例子。选项卡的应用很广泛，每个标签的切换修改的只是display值，比较容易理解。通过循环来遍历获取标签，然后复制给每一个标签。

<!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=gb2312" />
<title>this</title>
<script type="text/javascript">
window.onload=function(){
var abtn=document.getElementsByTagName('input');
var i=0;
for(i=0;i<abtn.length;i++)
{    abtn[i].onclick=function(){
alert(this.value);
};
}
};
</script>
</head>
<body>
<input type="button" value="China"/>
<input type="button" value="Hongkong"/>
<input type="button" value="Wuhan"/>
</body>
</html>

这个是当你点击一个按钮的时候，this的应用范围很广泛，浏览器就弹出相应的按钮的标签文本值。

<!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=gb2312" />
<title>全选</title>
</head>
<script type="text/javascript">
window.onload=function(){
var obtn=document.getElementById('btn');
var ainput=document.getElementsByTagName('input');
var i=0;
obtn.onclick=function(){
for(i=0;i<ainput.length;i++)
{
ainput[i].checked=true;
}
};
};
</script>
<body>
<p id="btn">全选</p>
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br /><input type="checkbox" /><br />
</body>
</html>

这个是一个全选的的功能，checked就是当你选中的时候。比较简单，有兴趣的同学可以试着做一下，都很基础。晚安~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航