1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title></title>
  6.          <style>
  7.  
  8.              * {
  9.                  margin: 0;
  10.                  padding: 0;
  11.                  border: none;
  12.              }
  13.              ul, li {
  14.                  list-style: none;
  15.              }
  16.  
  17.              #box {
  18.                  width: 220px;
  19.                  height: 350px;
  20.                  background: #ccc;
  21.                  margin: 10px auto;
  22.              }
  23.  
  24.              ul {
  25.                  overflow: hidden;
  26.              }
  27.  
  28.              li {
  29.                  float: left;
  30.                  width: 58px;
  31.                  height: 53px;
  32.                  text-align: center;
  33.                  border: 1px solid #999;
  34.                  margin-left: 10px;
  35.                  margin-top: 10px;
  36.                  background: #444;
  37.                  color: white;
  38.                  cursor: pointer;
  39.              }
  40.  
  41.              #showInfo {
  42.                  width: 200px;
  43.                  height: 50px;
  44.                  border: 1px solid white;
  45.                  margin: 10px auto;
  46.              }
  47.  
  48.              .active {
  49.                  background: white;
  50.                  border: 1px solid orange;
  51.                  color: orange;
  52.              }
  53.  
  54.          </style>
  55.  
  56.          <script src="js/jquery-1.12.3.js"></script>
  57.          <script>
  58.              //代码从这里开始写
  59.              //addClass()
  60.              //siblings()
  61.              $(function(){
  62.  
  63.                  $("li").click(function(){
  64.                      //链式写法
  65.                      $(this).addClass("active").siblings().removeClass("active");
  66.                      $("#showInfo").html( $(this).find("h2").html() + "月份好" );
  67.                  })
  68.  
  69.              })
  70.  
  71.          </script>
  72.      </head>
  73.      <body>
  74.          <div id="box">
  75.              <ul>
  76.                  <li class="">
  77.                      <h2>1</h2>
  78.                      <p>Jan</p>
  79.                  </li>
  80.                  <li class="active">
  81.                      <h2>2</h2>
  82.                      <p>Feb</p>
  83.                  </li>
  84.                  <li>
  85.                      <h2>3</h2>
  86.                      <p>Mar</p>
  87.                  </li>
  88.                  <li>
  89.                      <h2>4</h2>
  90.                      <p>Apr</p>
  91.                  </li>
  92.                  <li>
  93.                      <h2>5</h2>
  94.                      <p>May</p>
  95.                  </li>
  96.                  <li>
  97.                      <h2>6</h2>
  98.                      <p>Jun</p>
  99.                  </li>
  100.                  <li>
  101.                      <h2>7</h2>
  102.                      <p>Jul</p>
  103.                  </li>
  104.                  <li>
  105.                      <h2>8</h2>
  106.                      <p>Aug</p>
  107.                  </li>
  108.                  <li>
  109.                      <h2>9</h2>
  110.                      <p>Sep</p>
  111.                  </li>
  112.                  <li>
  113.                      <h2>10</h2>
  114.                      <p>Oct</p>
  115.                  </li>
  116.                  <li>
  117.                      <h2>11</h2>
  118.                      <p>Nov</p>
  119.                  </li>
  120.                  <li>
  121.                      <h2>12</h2>
  122.                      <p>Dec</p>
  123.                  </li>
  124.              </ul>
  125.              <div id="showInfo">1月份好</div>
  126.          </div>
  127.      </body>
  128.  </html>

效果

jq-demo-日历的更多相关文章

  1. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  3. jq demo 简单的图片懒加载效果

    重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...

  4. jq demo 点击弹窗，居中，可滚动，可拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jq demo 点击评分组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jq demo 九宫格抽奖

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. jq demo 点击选中元素左右移动

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. jq demo—图片翻页展示效果 animate()动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Web前端框架汇总

    在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

  10. java前端选择

    在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

随机推荐

  1. LinkButton(按钮)组件

    一.//class加载方式 <div id="pos" class="easyui-linkbutton">按钮</div> 二.js加 ...

  2. 2018-8-10-WPF-DrawingVisual

    title author date CreateTime categories WPF DrawingVisual lindexi 2018-08-10 19:16:53 +0800 2018-2-1 ...

  3. memcache常用操作

    Command Description Example get 读取键值 get mykey set 设置新键值 set mykey 0 60 5 add 新增键值 add newkey 0 60 5 ...

  4. windows更改文件打开方式

  5. 【索引】位图BitMap索引

    位图(BitMap)索引 前段时间听同事分享,偶尔讲起Oracle数据库的位图索引,顿时大感兴趣.说来惭愧,在这之前对位图索引一无所知,因此趁此机会写篇博文介绍下位图索引. 1. 案例 有张表名为ta ...

  6. SCP-bzoj-1054

    项目编号:bzoj-1054 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 直接状压BFS即可,我实现的比较渣..复杂度O(45*216). 附录: #include <bits/st ...

  7. BZOJ 1303: [CQOI2009]中位数图(思路题)

    传送门 解题思路 比较好想的思路题.首先肯定要把原序列转化一下,大于\(k\)的变成\(1\),小于\(k\)的变成\(-1\),然后求一个前缀和,还要用\(cnt[]\)记录一下前缀和每个数出现了几 ...

  8. 51nod 1149 Pi的递推式(组合数学)

    传送门 解题思路 首先因为\(Pi\)不是整数,所以不能直接递推.这时我们要思考这个式子的实际意义,其实\(f(i)\)就可以看做从\(i\)这个点,每次可以向右走\(Pi\)步或\(1\)步,走到[ ...

  9. ES6 教程

    上次分享了es6开发环境的搭建,本次接着分享es6常用的特性. es6常用的语法参考   :    https://blog.csdn.net/itzhongzi/article/details/73 ...

  10. ionic学习使用笔记（一） 版本更新及创建项目时遇到的问题解决

    最近开始用ionic开发项目,虽然去年的时候用ionic 2.0 开发过公司的项目,不过现在的ionic已经升级到了ionic framework 3.0 了.而且还有个 ionic-cli . 使用 ...