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. MFC中的各种DC区别

    转载自:xntop的<区别MFC中的CClientDC.CWindowDC.CPaintDC.CMetaFileDC> CClientDC及其子类 1. CClientDC类只能在客户区绘 ...

  2. 更改RAC日志组

    alter database add logfile thread 1 group 5 ('+DATA/idb/onlinelog/group5.log') size 256m;alter datab ...

  3. [IIS]IIS扫盲(八)

    iis - IIS之FTP服务器 一.建立你的FTP站点  第一个FTP站点(即“默认FTP站点”)的设置方法和更多FTP站点的建立方法请参照前文Web服务器中相关操作执行.需要注意的是,如果你要用一 ...

  4. HEAP CORRUPTION 错误

    一般是new一块内存过小,  在这个内存块上写入的内容过大, delete时出现的错误; 如: char* ptr = new char[2]; //申请了两个字节 *ptr = "1234 ...

  5. 标清与高清，720p和1080p，720i和720p，h264与h265

    480x320, 640x480 标清 1024x720p 高清 1920x1080i (隔行扫描) 也属于高清 1920x1080p 全高清 3840x2160,7680x4320 超(高)清   ...

  6. 5.Firedac错误信息

    主要错误信息属性: 1.EFDDBEngineException Errors -- TFDDBError对象集合. ErrorCount --错误的记录数 Kind -- DBMS的错误集合. Me ...

  7. Python 2.7_Second_try_爬取阳光电影网_获取电影下载地址并写入文件 20161207

    1.昨天文章http://www.cnblogs.com/Mr-Cxy/p/6139705.html 是获取电影网站主菜单 然后获取每个菜单下的电影url  2.今天是对电影url 进行再次解析获取下 ...

  8. css颜色大全-转载

    FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA  #FF0088  #C10066  #A ...

  9. HDU 5183 Negative and Positive (NP) ——（后缀和+手写hash表）

    根据奇偶开两个hash表来记录后缀和.注意set会被卡,要手写hash表. 具体见代码: #include <stdio.h> #include <algorithm> #in ...

  10. git push throws error: RPC failed; result=22, HTTP code = 411的解决办法

    原因:默认 Git 设置 http post 的缓存为 1MB,将其设置为 500MB 解决办法如下: git config http.postBuffer 524288000