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 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
Vue中computed及watch区别实例解析
Aug 01 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
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python连接MySQL数据库实例分析
2015/05/12 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
Python实现TCP通信的示例代码
2019/09/09 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
Ibatis如何使用动态表名
2015/07/12 面试题
.net开发工程师面试题
2014/02/25 面试题
C#如何进行LDAP用户校验
2012/11/21 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
银行委托书范本
2014/04/04 职场文书
消防安全责任书
2014/04/14 职场文书
平安家庭事迹材料
2014/12/20 职场文书
长江三峡导游词
2015/01/31 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android