<!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. easyui grid单元格类型

    在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的editor类型,这时原有的例子就显的有点太过简单,不能实现我们的需求,现在应用我在项目中的操作为例,显示下实现同列 ...

  2. redis Hash相关命令

  3. slim.arg_scope（）的使用

    [https://blog.csdn.net/u013921430 转载] slim是一种轻量级的tensorflow库,可以使模型的构建,训练,测试都变得更加简单.在slim库中对很多常用的函数进行 ...

  4. mongoose 常用数据库操作 更新

    更新 Model.update(conditions, update, [options], [callback]) db.js var mongoose = require('mongoose'); ...

  5. 配置 Linux 静态网卡 & 远程连接 MySQL 问题

    1.设置 Linux 为静态网络配置 使用 VMWare 安装好 CentOS 后,将网络适配器设置为 NAT 模式.为了防止 IP 关机重启时候经常变动,需要将网卡信息设置为静态. 修改 /etc/ ...

  6. vue 项目 跳转 页面 不刷新 问题

    vue项目中需要导出下载客户数据,因为数据太多,响应太慢.后台直接上传给七牛  然后返回一个下载链接  前端通过跳转链接 来下载 riskManagementApi.friendExprotAll(t ...

  7. 超实用的HTML代码段（赵荣娇）

    第1章 创建HTML文档 11.1 HTML文档的基本结构 2 <html> <head> <title>Title of page</title> & ...

  8. Windows win32 API 类库 硬件

    // 硬件 Win32_Processor, // CPU 处理器 Win32_PhysicalMemory, // 物理内存条 Win32_Keyboard, // 键盘 Win32_Pointin ...

  9. 富文本 保存转义StringEscapeUtils.unescapeHtml4(

    StringEscapeUtils.unescapeHtml4( [org.apache.commons.lang.StringEscapeUtils.escapeHtml(str)] [String ...

  10. （转）数字证书, 数字签名, SSL(TLS) , SASL

    转:http://blog.csdn.net/xueshanfeihu0/article/details/9154219 因为项目中要用到TLS + SASL 来做安全认证层. 所以看了一些网上的资料 ...