JS简易日历    innerHTML

<title>无标题文档</title>

<script>

  var neirong=['一','二','三','四','五','六','七','八','九','十','十一','十二',];

  window.onload=function(){

     var tab=document.getElementById('tab');

     var ul=tab.getElementsByTagName('ul')[0];

     var li=ul.getElementsByTagName('li');

     var div=tab.getElementsByTagName('div')[0];

     var i=0;

    for(i=0;i<li.length;i++){

       li[i].index=i;

       li[i].onmouseover=function(){

         for(i=0;i<li.length;i++){

             li[i].className='';

          };

          this.className='active';

          div.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+neirong[this.index]'+'</p>'

        };

     };

 };

</script>

</head>

<body>

<div id="tab" class="calendar">

   <ul>

       <li class="active"><h2>1</h2><p>JAN</p></li>

         <li><h2>2</h2><p>FER</p></li>

         <li><h2>3</h2><p>MAR</p></li>

         <li><h2>4</h2><p>APR</p></li>

         <li><h2>5</h2><p>MAY</p></li>

         <li><h2>6</h2><p>JUN</p></li>

         <li><h2>7</h2><p>JUL</p></li>

         <li><h2>8</h2><p>AUG</p></li>

         <li><h2>9</h2><p>SEP</p></li>

         <li><h2>10</h2><p>OCT</p></li>

         <li><h2>11</h2><p>NOV</p></li>

         <li><h2>12</h2><p>DEC</p></li>

   </ul>

   <div class="text">

      <h2>3月活动</h2>

      <p>新学期开始了，大家都拥有个崭新的面貌投入学习吧！</p>

   </div>

</div>

</body>

初探JavaScript魅力（五）的更多相关文章

  1. 【JavaScript从入门到精通】第四课初探JavaScript魅力-04

    第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...

  2. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  3. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  4. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  5. 01 - 初探JavaScript魅力

    网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠 ...

  6. 初探JavaScript魅力（二）

    行为,样式,结构三者分离(javascript, css, html),不要在行间加行为,样式 样式优先级:*<标签<class<ID<行间 style与className,如 ...

  7. 初探Javascript魅力(1)

    转自:CSDN--http://blog.csdn.net/cherry_vicent/article/details/42120149 1.javascript是什么   根据用户的一些操作,然后来 ...

  8. 初探JavaScript魅力（四）

    选项卡 <title>无标题文档</title> <style> #div1 .active{background:#FF0;} #div1 div{width:2 ...

  9. 初探JavaScript魅力（三）

    复选框的全选.反选和不选 <title>无标题文档</title> <style> body{background:#666;} </style> &l ...

随机推荐

  1. webapi中使用Route标签

    Prior to Web API 2, the Web API project templates generated code like this: protected void Applicati ...

  2. Leetcode 136 137 260 SingleNumber I II III

    Leetccode 136 SingleNumber I Given an array of integers, every element appears twice except for one. ...

  3. Gentoo网络配置

    网卡识别配置 要开始配置你的网卡,你首先需要告诉Gentoo RC系统你的网卡. 可以用ifconfig命令查看自己网卡名字: ifconfig -a 网卡名字(如eth0)的识别是通过在/etc/i ...

  4. Gentoo安装详解（一） -- 安装基本系统

    前期准备 远程登录: 开启ssh服务: /etc/init.d/sshd start 设置密码: passwd 以便使用putty.ssh client远程登录上传stage等(有时在线下载很慢,而局 ...

  5. SharePoint 入门书籍推荐 转载来源http://www.cnblogs.com/jianyus/p/3513238.html

    最近,总有人说刚入门SharePoint,没有好的资料或者电子书,资料推荐大家多看看博客园和CSDN的博客.对于看博客,我一般是两个思路,要么找一个人的从头到尾看一遍,觉得有意义的,就把地址加收藏:或 ...

  6. CentOS中文件夹基本操作命令

    摘自:http://www.centoscn.com/CentOS/help/2013/1024/1967.html 文件(夹)查看类命令 ls--显示指定目录下内容 说明:ls 显示结果以不同的颜色 ...

  7. 模拟IIC协议时序

    IIC是飞利浦公司开发的两线式串行总线,主要应用在单片机和外围电子器件之间的数据通讯. IIC总线优点是节约总线数,稳定,快速,是目前芯片制造上非常流行的一种总线,大多数单片机已经片内集成了IIC总线 ...

  8. log4j2配置MDC分线程写日志

    1.MDC是一个高级一些的工具,可以配置分用户(userid)写日志,也可以分线程 2.方法和道理都是相似的,在写入日志之前配置线程名或者用户id 3.如果将线程名配置为目录,可以将不同线程的日志输送 ...

  9. log4net 日志文件占用，不能及时释放

    在appender 下面加 <lockingModel type="log4net.Appender.FileAppender+MinimalLock" />

  10. sd卡文件操作

    1. 得到存储设备的目录:/SDCARD(一般情况下) SDPATH=Environment.getExternalStorageDirectory()+"/"; 2. 判断SD卡 ...