<!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. 使用TPL取回Task中的运行结果的三种方式

    概念:TPL( Task Parallel Library) 任务并行库 使用Task类执行多线程操作要比直接使用自己手工创建Thread效率高很多. 默认情况下,TPL使用线程池中的线程执行Task ...

  2. php常见的验证方法

    php常见的验证方法 干货文章 ·2018-03-16 23:50:36 <?php /** * @param $id * @return false|int * 检测id */ functio ...

  3. 我的黑苹果之路 9400f + msi b360 mortar + 1050ti

    硬件配置: CPU:i5 9400f 主板:微型msi迫击炮B360 内存:威刚 ddr4 8g 2133 *2 显卡:技嘉1050ti 4g 显示器:koiso 4K (使用的dp接口连接,hdmi ...

  4. ubuntu批量转换所有子文件夹下图片文件格式

    第一步按照 sudo apt-get install imagemagick 对于一个文件,可以: convert ubuntuhandbook.png ubuntuhandbook.jpg 对于多个 ...

  5. Android——谷歌官方下拉刷新控件SwipeRefreshLayout（转）

    转自:http://blog.csdn.net/zouzhigang96/article/details/50476402 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言: 如今谷歌推出了 ...

  6. 说一下HTML5与传统HTML的区别

    1.首先说一下什么是HTML5 HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HT ...

  7. java多线程面试题_线程并发面试题

    1.什么是线程?线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成一个 ...

  8. express 使用art-template模板引擎

    下载express-art-template art-template - app.js中配置 - 注册一个模板引擎 - `app.engine('.html',express-art-templat ...

  9. Hive学内置条件和字符串函数

    https://blog.csdn.net/skywalker_only/article/details/38752003 条件函数 下表为Hive支持的一些条件函数. 返回类型 函数名 描述 T i ...

  10. Java——类的成员之五：内部类

    3.6 类的成员之五:内部类 3.6.1 静态内部类 ①静态内部类可以等同看做静态变量. ②内部类重要的作用:可以访问外部类中私有的数据. ③静态内部类可以直接访问外部类的静态数据,无法直接访问成员. ...