《JavaScript学习笔记五》：选项卡和简易日历的实现

本文主要是介绍《JavaScript学习笔记五》：选项卡和简易日历的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

《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];//只有一个Divvar 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>