2015.7.8js-05(简单日历)
2015-07-08 08:59
549 查看
今天做一个简单的小日历,12个月份,鼠标移动其中一个月份时添加高亮并显示本月的活动。其实同理与选项卡致。不过是内容存在js里
window.onload = function(){ var oMain = document.getElementById("month"); var aMonth = oMain.getElementsByTagName("li"); var oContent = document.getElementById("content"); var aActiveContent = ["1月份的活动内容","2月份的活动内容","3月份的活动内容","4月份的活动内容","5月份的活动内容","6月份的活动内容","7月份的活动内容","8月份的活动内容","9月份的活动内容","10月份的活动内容","11月份的活动内容","12月份的活动内容"] for(var i = 0, len = aMonth.length; i < len; i++){ aMonth[i].index = i; aMonth[i].onclick = function(){ for(var j = 0, len = aMonth.length; j < len; j++){ aMonth[j].className = ""; } this.className = "active"; oContent.innerHTML = "<h2>"+(this.index+1)+"月</h2><p>"+aActiveContent[this.index]+"</p>"; } } }
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>
相关文章推荐
- 在Ext JS 6中添加本地化包
- 在Ext JS 6中添加本地化包
- 在Ext JS 6中添加本地化包
- 在Ext JS 6中添加本地化包
- 链接<a href="javascript:void(0)" />
- JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
- 关于js with语句的一些理解
- 初识JSLint及建议JS编码风格
- JSP九大内置对象及四个作用域
- [LeetCode][JavaScript]Implement Queue using Stacks
- JavaScript对象属性检查、增加、删除、访问操作实例
- JavaScript中调用函数的4种方式代码实例
- JavaScript forEach()遍历函数使用及介绍
- JavaScript中函数(Function)的apply与call理解
- javascript连续赋值问题
- javascript获取重复次数最多的字符
- js实现图片点击左右轮播
- 详细分析JavaScript变量类型
- javascript实现10个球随机运动、碰撞实例详解
- js 判断对象是否是Array