p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #d74200 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #289c97 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4a8a01 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #060606 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #060606; min-height: 35.0px }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #929151 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4f5d66 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #a5b2b9 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #929151 }
span.s8 { color: #060606 }
span.s9 { color: #ad42ef }
span.s10 { color: #698906 }
span.s11 { color: #4a8a01 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #e48b00 }
span.s15 { color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#box{

background-color: green;

border-radius: 20px;

padding: 10px;

height: 800px;

width: 450px;

margin: 20px auto;

}

ul,li{

margin: 0;

padding: 0;

list-style-type: none;

}

ul{

overflow: hidden;

}

li{

background-color: yellow;

height: 120px;

width:120px;

float: left;

margin: 10px;

text-align: center;

color:blueviolet;

}

#bottom{

margin: 10px;

}

.active{

background-color: crimson;

}

</style>

</head>

<body>

<div id="box">

<ul>

<li class="active"><h2>一月</h2><p>January </p></li>

<li><h2>二月</h2><p>February </p></li>

<li><h2>三月</h2><p>March </p></li>

<li><h2>四月</h2><p> April </p></li>

<li><h2>五月</h2><p> May </p></li>

<li><h2>六月</h2><p>June</p></li>

<li><h2>七月</h2><p>July </p></li>

<li><h2>八月</h2><p>August</p></li>

<li><h2>九月</h2><p>September </p></li>

<li><h2>十月</h2><p> October </p></li>

<li><h2>十一月</h2><p> November </p></li>

<li><h2>十二月</h2><p>December</p></li>

</ul>

<div id="bottom">

<h2>一月</h2>

<p>天气很好，去哪里玩呢？？？</p>

</div>

</div>

<script type="text/javascript">

var box=document.getElementById("box");

var bottom=document.getElementById("bottom");

var li=box.getElementsByTagName("li");

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

li[i].index=i;

var arr=["一月吃牛排","二月吃意面","三月看帅哥","四月看星星"

,"五月吃猪蹄","六月吃西瓜","七月吃雪糕","八月吹空调","九月捡树叶","十月吃烤鸡",

"十一月吃麻辣烫","十二月回家过年"];

li[i].onmouseover=function(){//事件绑定

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

//清除所有的li的className

li[i].className=" ";

}

this.className="active";//给当前的li添加className

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

}

}

</script>

</body>

</html>

用JS制作简易的可切换的年历，类似于选项卡的更多相关文章

  1. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  2. 【带着canvas去流浪（13）】用Three.js制作简易的MARVEL片头动画（下）

    目录 一. 模型的制作 1.1 生成字体模型 1.2 多表面贴图 二. 镜头及动画 三. 大作业总结 示例代码托管在:http://www.github.com/dashnowords/blogs 博 ...

  3. commander.js 制作简易的 MINA CLI 脚手架

    出发点并不是小程序本身,是想要做一个脚手架(command-line interface),看过 VUE / REACT 脚手架,觉得很厉害,但是并不太知道里面是怎么做成的,所以最近研究了研究,看能不 ...

  4. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  5. 【带着canvas去流浪（12）】用Three.js制作简易的MARVEL片头动画（上）

    目录 一. 大作业说明 二.基本思路 三.视频纹理表面修复--UV映射 3.1 问题描述 3.2 纹理贴图的基本原理-UV映射 3.3 关键示例代码 四.小结 示例代码托管在:http://www.g ...

  6. 使用node.js制作简易爬虫

    最近看了些node.js方面的知识,就像拿它来做些什么.因为自己喜欢摄影,经常上蜂鸟网,所以寻思了一下,干脆做个简单的爬虫来扒论坛的帖子. 直接上代码吧. var sys = require(&quo ...

  7. 原生JS制作简易Tabs组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS制作简易的考试答题管理系统

    答题卡系统: 网站运行效果 代码区域: HTML 代码: <style type="text/css"> body { font-size: 30px; backgro ...

  9. 用JS制作简易选项卡

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

随机推荐

  1. python3爬虫 url管理器

    import urllib.request #python3中将urllib2拆分为了urllib.request.urllib.error.urllib.response等 import http. ...

  2. cordova-plugin-unionpay

    https://github.com/Santino-Wu/cordova-plugin-unionpay

  3. Thinkphp源码分析系列（二）–引导类

    在上一章我们说到,ThinkPHP.php在设置完框架所需要的变量和调教好环境后,在最后调用了  Think\Think::start();  即Think命名空间中的Think类的静态方法start ...

  4. Python 爬虫—— requests BeautifulSoup

    本文记录下用来爬虫主要使用的两个库.第一个是requests,用这个库能很方便的下载网页,不用标准库里面各种urllib:第二个BeautifulSoup用来解析网页,不然自己用正则的话很烦. req ...

  5. Rserve， java调用R源文件

    Rserve安装和加载: install.packages("Rserve") library("Rserve") Rserve()   java调用: REn ...

  6. Maven pom.xml中添加指定的中央仓库

    中央仓库就是Maven的一个默认的远程仓库,Maven的安装文件中自带了中央仓库的配置($M2_HOME/lib/maven-model-builder.jar) 在很多情况下,默认的中央仓库无法满足 ...

  7. {CSDN}{英雄会}{火车调度}

    思路: 给定一系列时刻表,求能满足各个时刻的最小火车数量. 打眼一看, 把此题归入到最大流,仔细一想不符合流网络的规律,换思路. 由于是一个最优化问题,自然想到动态规划和贪心. 最后确定贪心.从最早出 ...

  8. C语言 malloc、calloc、realloc的区别

    三个函数的申明分别是: void* malloc(unsigned size); void* realloc(void* ptr, unsigned newsize); void* calloc(si ...

  9. Spark-1.0.1 的make-distribution.sh编译、SBT编译、Maven编译 三种编译方法

    fesh个人实践,欢迎经验交流!本文Blog地址:http://www.cnblogs.com/fesh/p/3775343.html 本文编译方法所支持的hadoop环境是Hadoop-2.2.0, ...

  10. delphi之多线程编程

    本文的内容取自网络,并重新加以整理,在此留存仅仅是方便自己学习和查阅.所有代码均亲自测试 delphi7下测试有效.图片均为自己制作. 多线程应该是编程工作者的基础技能, 但这个基础我从来没学过,所以 ...