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

《JavaScript学习笔记五》:选项卡的实现

在许多的网页中都有选项卡的身影,如下就是一个例子:
当我们点击不同的选项时,就会出现不同的信息。
《JavaScript学习笔记五》:选项卡和简易日历的实现_第1张图片

下面我们就实现这样一个简单的功能,实现的思路如下:
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视频教程》

你可能感兴趣的:(JavaScript,日历,选项卡)