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. pgadmin中的备份功能消失的原因和找回方法

    pgadmin在正常情况下,在左侧的[对象浏览器]中选中数据库.模式或者表时,右键会出现[备份]和[恢复]的选项(除早期不支持该功能的版本外). 如: 当然,有时候有人会发现,当你想要用这些备份还原功 ...

  2. CentOS6开启FTP及telnet服务教程

    先来开通CentOS6的FTP服务吧.telnet服务也一并学习学习吧.在安装好CentOS以后,需要设置Ftp和Telnet服务文件,才能启动Ftp和Telnet服务,可以通过远程控制进行开启. 开 ...

  3. 第一零五天上课 PHP TP框架下分页

    控制器代码(TestController.class.php) <?php namespace Home\Controller; use Home\Controller\EmptyControl ...

  4. 自定义控件TextView

    public class defineTextView extends TextView { Context context; public defineTextView(Context contex ...

  5. APP测试工具之TraceView卡顿检测

    Traceview卡顿检测 Traceview是Android平台特有的数据采集和分析工具,集成在DDMS工具中,可以采集程序中的方法执行耗时.调用关系.调用次数以及资源占用等情况. 一.使用方法 1 ...

  6. 8.1H5学习笔记

    内嵌框架 说明: 属性 属性值 说明 width px,% 指定框架的宽度 height px,% 指定框架的高度 scrolling yes,no,auto 是否显示滚动条 frameborder ...

  7. JQuery中ajax请求写法

    $.ajax({ type: "POST", url: "ygdwController.do?getonygdw", data : "id=" ...

  8. shell讲解-小案例

    shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...

  9. Android_layout 布局（一）

    今天主要学习了Android 的layout布局. Android layout 布局一般分为五种: LinearLayout (线性布局) :子组件按照垂直或者水平方向来布局. RelativeLa ...

  10. div层叠顺序额

    在模态窗体中打开新div,结果该div不显示 该div不是没有显示,而是显示了,但是被这个模态状体挡住了 解决方法:修改z-index这个参数 该参数越大则显示在越上层,即可见