2015.7.8js-05(简单日历)

今天做一个简单的小日历，12个月份，鼠标移动其中一个月份时添加高亮并显示本月的活动。其实同理与选项卡致。不过是内容存在js里

 1 window.onload = function(){
 2     var oMain = document.getElementById("month");
 3     var aMonth = oMain.getElementsByTagName("li");
 4     var oContent = document.getElementById("content");
 5     var aActiveContent = ["1月份的活动内容","2月份的活动内容","3月份的活动内容","4月份的活动内容","5月份的活动内容","6月份的活动内容","7月份的活动内容","8月份的活动内容","9月份的活动内容","10月份的活动内容","11月份的活动内容","12月份的活动内容"]
 6 
 7     for(var i = 0, len = aMonth.length; i < len; i++){
 8         aMonth[i].index = i;
 9         aMonth[i].onclick = function(){
10             for(var j = 0, len = aMonth.length; j < len; j++){
11                 aMonth[j].className = "";
12             }
13             this.className = "active";
14             oContent.innerHTML = "<h2>"+(this.index+1)+"月</h2><p>"+aActiveContent[this.index]+"</p>";
15         }
16     }
17 }

HTML

<div id="wrap">
    <div id="month" class="main">
        <ul>
            <li class="active"><a href="javascript:'">1月份</a></li> 
            <li><a href="javascript:'">2月份</a></li> 
            <li><a href="javascript:'">3月份</a></li> 
            <li><a href="javascript:'">4月份</a></li>
            <li><a href="javascript:'">5月份</a></li> 
            <li><a href="javascript:'">6月份</a></li> 
            <li><a href="javascript:'">7月份</a></li> 
            <li><a href="javascript:'">8月份</a></li> 
            <li><a href="javascript:'">9月份</a></li> 
            <li><a href="javascript:'">10月份</a></li> 
            <li><a href="javascript:'">11月份</a></li> 
            <li><a href="javascript:'">12月份</a></li>  
        </ul>
    </div>
    <div id="content">
        <h2>1月</h2>
        <p>1月份的活动内容</p>
    </div>
</div>

 

posted @ 2015-07-08 08:59  AlanTao  阅读(195)  评论(0)  编辑  收藏  举报