js简易日历

js简易日历中设计的知识点：选项卡切换   数组    innerHTML  连接符

与选项卡的区别：div的个数不同

连接符中需要注意的：(优先级)

"abc"+12+3+"def"               结果：abc123def

"abc"+(12+3)+"def"            结果：abc15def

html代码：

<body>
        <div class="contain">
            <ul id="tab" class="clearFix">
                <li>1月</li>
                <li>2月</li>
                <li>3月</li>
                <li>4月</li>
                <li>5月</li>
                <li>6月</li>
                <li>7月</li>
                <li>8月</li>
                <li>9月</li>
                <li>10月</li>
                <li>11月</li>
                <li>12月</li>
            </ul>
            <div id="content">
                <h2>1月活动</h2>
                <p>去滑雪啦，哈哈</p>
            </div>
        </div>
    </body>

css代码：

<link rel="stylesheet" type="text/css" href="css/public.css"/>
<style type="text/css">
    .contain{width: 240px;margin: 0 auto;margin-top: 100px;}
    #tab{width: 240px;}
    #tab li{float: left;width: 40px;height: 60px;line-height:60px;margin: 10px;text-align:center;background: #dbdbdb;cursor: pointer;}
    #tab li.active{background: #f60;color: #fff;}
    #content{margin: 10px;width: 200px;min-height: 100px;padding:10px;background: #999;}
</style>

js代码：

<script type="text/javascript">
            window.onload=function(){
                var oTab=document.getElementById("tab");
                var aLi=oTab.getElementsByTagName("li");
                var oDiv=document.getElementById("content");
                var arr=['去滑雪啦，哈哈','222','333','444','555','666','777','888','999','100','101','102'];
                for(var i=0;i<aLi.length;i++){
                    aLi[i].index=i;
                    aLi[i].onmouseover=function(){
                        for(var i=0;i<aLi.length;i++){
                            aLi[i].className="";
                        }
                        this.className="active";
                        oDiv.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
                    }
                }
            }
</script>

效果如下：

 

posted @ 2016-07-15 11:24  rain92  阅读(406)  评论(0)  编辑  收藏  举报