<!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. 利用ARIMA算法建立短期预测模型

    周五福利日活动是电信为回馈老用户而做的活动,其主要回馈老用户的方式是让用户免费领取对应的优惠券,意在提升老用户的忠诚度和活跃度.今日,为保证仓库备货优惠券资源充足,特别是5元话费券等,需要对该类优惠券 ...

  2. hdu 3450 后缀数组

    题目大意: 求多个字符串的最长公共子串 基本思路: 参加我的博客hdu2774 代码如下: #include<cstdio> #include<cstring> using n ...

  3. loj2573[TJOI2018]数字计算

    题意:操作1:x=x*m,输出x%mod.2.x/=map[m].m即第m次操作,保证该次操作为1操作,并且每个操作最多只会被删一次.q<=1e5. 线段树维护操作信息的乘积,删除把对应位置的权 ...

  4. Hadoop(三）YARN

    Yet Another Resources Negotiator 从Hadoop2.0版本开始引入YARN,主要功能: 集群资源管理系统 负责集群的统一管理和调度 与客户端交互,处理客户端请求 一.基 ...

  5. shell编程基础干货

    变量及赋值 设置变量   A=‘china’  取消变量  unset  A    加上 export 关键字  代表全局变量 a=$(ls -l /root/bin)   ##运行里面的命令,并把结 ...

  6. JS中的call()、apply() 以及 bind()方法用法总结

    JS中的call()方法和apply()方法用法总结  : 讲解: 调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. function add(c,d){ return thi ...

  7. CF 1097D - Hello 2019 D题: Makoto and a Blackboard

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:传送门  Portal  原题目描述在最下面.  给一个数n ...

  8. Java-Class-FC：java.time.Duration

    ylbtech-Java-Class-FC:java.time.Duration 1.返回顶部   2.返回顶部   3.返回顶部 1. /* * Copyright (c) 2012, 2015, ...

  9. monkeyrunner 进行多设备UI测试

    monkeyrunner进行多设备UI测试  首先你要连接好多个手机设置好已经连接好的手机的ip列表ipp = ['192xxx','192xxx']杀掉之前所有appium进程subprocess. ...

  10. MakeDown渲染出错

    MakeDown渲染出错 makedown作为程序员不可或缺的编辑工具,平时的使用技巧也是非常多的. 今天给新电脑装了一个,发现出现了错误(win10环境下),如图: 错误的表现形式即:不能实时预览M ...