zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    安卓手机无法使用adb导出文件
    dex2jar 报错 com.googlecode.d2j.DexException: not support version
    夜神模拟器adb连接
    无法安装 /lib/x86_64-linux-gnu/libpng12.so.0 的新版本: 没有那个文件或目录
    mysql基础 -创建
    VScode
    阿强的TypeScript基础
    Vue由浅入深之Array变化侦测
    深入浅出Vue.js一之Object的变化侦测
    阿强工作中常用的js的数组方法汇总
  • 原文地址:https://www.cnblogs.com/alantao/p/4629161.html
Copyright © 2011-2022 走看看