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. properties文件简介及其常用Java操作

    一.properties文件简介 java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值&q ...

  2. Flash插件地址

    Flash插件地址: http://get.adobe.com/cn/flashplayer/存档版本地址: http://helpx.adobe.com/flash-player/kb/archiv ...

  3. JavaScript笔记杂谈篇(啥都有)

    二维码缩放比例以43PX的倍数缩放最为标准. NuGet相关管理http://www.cnblogs.com/dudu/archive/2011/07/15/nuget.html 学习笔记: http ...

  4. 使用celery的backend异步获取结果

    惯例先贴出相关参考的文档: http://docs.celeryproject.org/en/stable/getting-started/next-steps.html http://docs.ce ...

  5. 关键字static和this

    1.this关键字 this:代表当前对象,就是代表所在函数所属类的引用.哪个对象调用了this所在的函数,this就代表哪个对象. this关键字也可以用于在构造函数中调用其他构造函数,此时要注意, ...

  6. leetcode 125

    125. Valid Palindrome Given a string, determine if it is a palindrome, considering only alphanumeric ...

  7. thinkphp实现单图片上传

    $config=array( 'maxSize' => 3145728, 'savePath' => './Public/Uploads/', 'rootPath' => './', ...

  8. 如何防止ElasticSearch集群出现脑裂现象（转）

    原文:http://xingxiudong.com/2015/01/05/resolve-elasticsearch-split-brain/ 什么是“脑裂”现象? 由于某些节点的失效,部分节点的网络 ...

  9. 关于YUV格式数据

    (1) YUV格式有两大类:planar和packed.对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V.对于packed的YUV格式,每个像素点 ...

  10. anomaly detection algorithm

    anomaly detection algorithm 以上就是异常监测算法流程