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

最新推荐文章于 2018-12-21 20:06:00 发布

HelloWorld_EE

最新推荐文章于 2018-12-21 20:06:00 发布

阅读量618

点赞数 1

分类专栏： javascript 文章标签： javascript 选项卡日历

本文链接：https://blog.csdn.net/u010412719/article/details/51533990

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

《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视频教程》

HelloWorld_EE

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript学习笔记五》：选项卡和简易日历的实现

《JavaScript学习笔记五》：选项卡的实现在许多的网页中都有选项卡的身影，如下就是一个例子：当我们点击不同的选项时，就会出现不同的信息。下面我们就实现这样一个简单的功能，实现的思路如下： 1、当我们点击某个按钮时，由于不知道此时那个按钮处于高亮状态，因此，我们在高亮当前按钮之前，应该先清空所有按钮。 2、与1一样，由于此时我们不知道哪个div处于显示状态，因此，在显示相应的div时
复制链接

扫一扫