JS制作类似选项卡切换的年历


Posted in Javascript onDecember 03, 2016

本文实例为大家分享了用JS制作简易的可切换的年历,类似于选项卡,供大家参考,具体内容如下

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
深入了解JavaScript 私有化
May 30 Javascript
Node与Python 双向通信的实现代码
Jul 16 Javascript
JS键盘版计算器的制作方法
Dec 03 #Javascript
js实现右键自定义菜单
Dec 03 #Javascript
js实现小窗口拖拽效果
Dec 03 #Javascript
学习vue.js计算属性
Dec 03 #Javascript
学习vue.js中class与style绑定
Dec 03 #Javascript
jQuery图片轮播实现并封装(一)
Dec 03 #Javascript
jQuery 选择符详细介绍及整理
Dec 02 #Javascript
You might like
编写自己的php扩展函数
2006/10/09 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php错误级别的设置方法
2013/06/17 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
javascript处理table表格的代码
2010/12/06 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
jQuery知识点整理
2015/01/30 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
python中zip()方法应用实例分析
2016/04/16 Python
python实现按长宽比缩放图片
2018/06/07 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
django最快程序开发流程详解
2019/07/19 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python add_argument()用法解析
2020/01/29 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
英语专业个人求职自荐信
2013/09/21 职场文书
股份转让协议书
2014/04/12 职场文书
销售经理工作检讨书
2015/02/19 职场文书
亮剑观后感
2015/06/05 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
小学班主任研修日志
2015/11/13 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript