《JavaScript学习笔记五》:选项卡的实现
在许多的网页中都有选项卡的身影,如下就是一个例子:
当我们点击不同的选项时,就会出现不同的信息。
下面我们就实现这样一个简单的功能,实现的思路如下:
1、当我们点击某个按钮时,由于不知道此时那个按钮处于高亮状态,因此,我们在高亮当前按钮之前,应该先清空所有按钮。
2、与1一样,由于此时我们不知道哪个div处于显示状态,因此,在显示相应的div时,应该将所有的div隐藏。
具体实现代码如下:
<!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>
#div1 .active {background:yellow;}
#div2 div {width:200px;height:100px;border:1px solid #999;display:none ;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
oDiv=document.getElementById('div2');
var aDiv=oDiv.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
//先清空所有按钮,然后设置当前按钮
for(var k=0;k<aBtn.length;k++)
{
aBtn[k].className='';
}
this.className='active';//不能这么写:aBtn[i].className='active';
//先将所有的Div消失,然后给将对应的Div显示出来
for(var j=0;j<aDiv.length;j++)
{
aDiv[j].style.display="none";
}
aDiv[this.index].style.display="block";
};
}
};
</script>
</head>
<body>
<div id="div1">
<input type="button" value="头条" class="active" />
<input type="button" value="八卦" />
<input type="button" value="看天下" />
<input type="button" value="万象" />
</div>
<div id="div2">
<div style="display:block">
头条。。。。。
</div>
<div >
八卦。。。
</div>
<div >
看天下。。。。
</div>
<div >
万象。。。。。
</div>
</div>
</body>
</html>
这样我们就实现了选项卡的功能。
简易日历的实现
上面模拟了下选项卡的实现,每个按钮对应一个Div,下面就来模拟实现下简易日历。
在简易日历中,我们会看到这样的功能:当我们点击某一个月时,就会出现这个月相应的信息。
由于我们一年有12个月,我们也可以选择12个Div实现,但是如果我们实现一个万年历呢???你难道会选择用一万个Div来配套实现,我想你肯定不会这样吧。其实我们可以选择用一个Div来实现,也就是说,他们共用一个Div。
既然是共用一个Div,那么我们就只需要更改Div里面的内容即可。如何更改内容呢??
这里就要涉及到innerHTML的使用了。我们可以使用innerHTML来向对象(例如:Div对象)插入任何内容(包括html语言的内容)。
实现思路与上篇博文类似,看代码
<!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>
#div1 .active {background:red;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div')[0];//只有一个Div
var contentArr=[
"这个月是1月噢,你知道吗",
"这个月是2月,你们",
"这个月是3月,哈哈",
"这个月是4月。。。。",
"这个月是5月。。。。。",
"你知道吗,这个月是6月",
"这个月是7月,我们放暑假了",
"这个月是8月。。",
"这个月是9月。。。。",
"这个月是10月。。",
"这个月是11月。。",
"这个月是12月。"
];
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onmouseover=function ()
{
//先将所有的按钮的高点状态清除,然后将当前的按钮状态高亮显示
for(var j=0;j<aBtn.length;j++)
{
aBtn[j].className='';
}
this.className='active';
//更改div中的内容
aDiv.innerHTML='<h1>'+(this.index+1) +'月</h1><p>'+contentArr[this.index]+'</p>';
};
}
};
</script>
</head>
<body>
<div id="div1">
<input type="button" value="1月" class="active"/>
<input type="button" value="2月" />
<input type="button" value="3月" /><br />
<input type="button" value="4月" />
<input type="button" value="5月" />
<input type="button" value="6月" /><br />
<input type="button" value="7月" />
<input type="button" value="8月" />
<input type="button" value="9月" /><br />
<input type="button" value="10月" />
<input type="button" value="11月" />
<input type="button" value="12月" /><br />
<div >
<h1>1月</h1>
<p>这个月是1月噢,你知道吗</p>
</div>
</div>
</body>
</html>
参考资料
1、blue老师的《JavaScript视频教程》