<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             * {

                 margin: 0;

                 padding: 0;

                 border: none;

             }

             ul, li {

                 list-style: none;

             }

             #box {

                 width: 220px;

                 height: 350px;

                 background: #ccc;

                 margin: 10px auto;

             }

             ul {

                 overflow: hidden;

             }

             li {

                 float: left;

                 width: 58px;

                 height: 53px;

                 text-align: center;

                 border: 1px solid #999;

                 margin-left: 10px;

                 margin-top: 10px;

                 background: #444;

                 color: white;

                 cursor: pointer;

             }

             #showInfo {

                 width: 200px;

                 height: 50px;

                 border: 1px solid white;

                 margin: 10px auto;

             }

             .active {

                 background: white;

                 border: 1px solid orange;

                 color: orange;

             }

         </style>

         <script src="js/jquery-1.12.3.js"></script>

         <script>

             //代码从这里开始写

             //addClass()

             //siblings()

             $(function(){

                 $("li").click(function(){

                     //链式写法

                     $(this).addClass("active").siblings().removeClass("active");

                     $("#showInfo").html( $(this).find("h2").html() + "月份好" );

                 })

             })

         </script>

     </head>

     <body>

         <div id="box">

             <ul>

                 <li class="">

                     <h2>1</h2>

                     <p>Jan</p>

                 </li>

                 <li class="active">

                     <h2>2</h2>

                     <p>Feb</p>

                 </li>

                 <li>

                     <h2>3</h2>

                     <p>Mar</p>

                 </li>

                 <li>

                     <h2>4</h2>

                     <p>Apr</p>

                 </li>

                 <li>

                     <h2>5</h2>

                     <p>May</p>

                 </li>

                 <li>

                     <h2>6</h2>

                     <p>Jun</p>

                 </li>

                 <li>

                     <h2>7</h2>

                     <p>Jul</p>

                 </li>

                 <li>

                     <h2>8</h2>

                     <p>Aug</p>

                 </li>

                 <li>

                     <h2>9</h2>

                     <p>Sep</p>

                 </li>

                 <li>

                     <h2>10</h2>

                     <p>Oct</p>

                 </li>

                 <li>

                     <h2>11</h2>

                     <p>Nov</p>

                 </li>

                 <li>

                     <h2>12</h2>

                     <p>Dec</p>

                 </li>

             </ul>

             <div id="showInfo">1月份好</div>

         </div>

     </body>

 </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. teb教程6

    代价地图的转换 简介:本部分关于怎样把代价地图转换插件应用到转换占据栅格costmap2d到几何形状来优化(测试阶段) teb_local_planner包支持costmap_converter插件, ...

  2. 小白的第一篇python博客

    学习python课程三天,先了解了计算机的历史及各种发展史,python的历史及部分语法,python主要学习内容有"hello world",int常量.str字符串,print ...

  3. Kirinriki

    Kirinriki 定义两个长度相等的字符串\(\{a_i\},\{b_i\}\)的距离为\(\sum_{i=1}^n|a_i-b_{n-i+1}|\)(其中n为字符串的长度),给出一个字符串\(\{ ...

  4. uva658 dijkstra+状态压缩

    题目大意: 假定有n个潜在的bug和m个补丁,每个补丁用长为n的字符串表示.首先输入bug数目以及补丁数目.然后就是对m 个补丁的描述,共有m行.每行首先是一个整数,表明打该补丁所需要的时间.然后是两 ...

  5. js 实时计算文本框字数限制

    $.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', functio ...

  6. QT之QCustomPlot(二)

    怎么设置X,Y轴位置 Manages a single axis inside a QCustomPlot. Usually doesn't need to be instantiated exter ...

  7. Android onActivityResult()运行时刻的问题

    今天在开发过程中遇到一个很是怪异的问题,就是方法onActivityResult的执行问题,问题是当我从当前的Activity跳转的时候,尚未做任何动作,onActivityResult()就已经执行 ...

  8. CSS中各种百分比（%）

    1.固定定位  position:absolute;width:100%;height:100%: 中%相对的   都是浏览器的可视窗口宽高. 2.标准文档流中,标签的 % 单位除了height以外, ...

  9. [SCOI2014]方伯伯的玉米田 题解(树状数组优化dp)

    Description 方伯伯在自己的农田边散步,他突然发现田里的一排玉米非常的不美. 这排玉米一共有N株,它们的高度参差不齐. 方伯伯认为单调不下降序列很美,所以他决定先把一些玉米拔高,再把破坏美感 ...

  10. *&m与m的区别

    int *a;int * &p=a; 把 int * 看成一个类型,a就是一个整型指针,p 是a的别名 #include<iostream> using namespace std ...