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. 重置SQL Server连接池

    EXEC sp_configure 'show advanced options', 1 GO -- To update the currently configured value for adva ...

  3. Codeforces Round #229 (Div. 2) C

    C. Inna and Candy Boxes time limit per test 1 second memory limit per test 256 megabytes input stand ...

  4. Android.mk的用法和基础【转】

    一个Android.mk file用来向编译系统描述你的源代码.具体来说:该文件是GNU Makefile的一小部分,会被编译系统解析一次或多次.你可以在每一个Android.mk file中定义一个 ...

  5. ThinkPHP的路由形式

    首先解释一下,这里路由的意思是:系统从URL参数中分析出当前请求的分组.控制器.操作 .另外我的网址根目录是放在article目录下的,Thinkphp主要有下面几种路由形式 1.pathinfo路径 ...

  6. SQL笔记 [SQL判断是否存在] [长期更新] (-2015.4)

    --判断某个存储过程是否存在if exists (select * from sysobjects where id = object_id(N'[p_CreateTable]') and OBJEC ...

  7. 关键字static和this

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

  8. 在配置dubbo框架的时候出现dubbo:application标签无法识别问题。

    这原因是因为目前 http://code.alibabatech.com/schema/dubbo/dubbo.xsd标签库打不开.所以我们需要在dubbo的jar包里面引入一个dubbo.xsd 解 ...

  9. ted be grateful

    -------------------------------------------------------------- David Steindl-Rast: Want to be happy? ...

  10. <a>标签的四种状态

    a:link  a:visited  a:hover   a:active