<!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. LeetCode Array Easy 189. Rotate Array

    ---恢复内容开始--- Description Given an array, rotate the array to the right by k steps, where k is non-ne ...

  2. Light项目---实现后端接口时遇见的一些问题

    ImproperlyConfigured: WSGI application 'lightapi.wsgi.application' could not be loaded; 在moddleware中 ...

  3. 前后台 工作切换---------------Linux 任务管理器（一）

    继续下一章... 发现了一个好东东.就是前后台的切换.例如我们现在要vim一个文件.然后又要查找一些命令的时候,以前不知道,都是退出后,查完了,在vim进入.现在我们可以将该vim拿到后台,然后查完了 ...

  4. python re.I compile search

    import restring = "The quick brown fox jumps over the lazy dog."a_list = string.split()pat ...

  5. Codeforces 1140F 线段树 分治 并查集

    题意及思路:https://blog.csdn.net/u013534123/article/details/89010251 之前cf有一个和这个相似的题,不过那个题只有合并操作,没有删除操作,直接 ...

  6. Linux新建环境变量快速切换到文件夹（export）

    如果有一个文件夹目录很深/home/user/aaa/bbb/ccc/ddd/eee/fff/ggg,但是经常要跳转到这个文件夹.一个简单的办法就是给这个文件夹建立一个类似$PATH那样的环境变量,如 ...

  7. 存储emoji表情，修改字符集为utf8mb4

    SHOW VARIABLES WHERE Variable_name LIKE 'character_set_%' OR Variable_name LIKE 'collation%'; SET ch ...

  8. NOIp2018集训test-10-20 (bike day6)

    B 君的第一题 lanzhou $x^{\frac{p-1}{2}}\equiv 1(mod\ p)$ $x\equiv x*x^{\frac{p-1}{2}} (mod\ p)$ $x\equiv ...

  9. python：列表、元组和字典

    1.1.特点:   任意对象的有序集合   通过偏移量读取   可变长度,异构以及任意嵌套   属于可变序列的分类   对象引用数组:当把一个对象赋给一个数据结构元素或变量名时,python总会存储对 ...

  10. c#网络通信框架networkcomms内核解析之一 消息传送2

    networkcomms.net 来自英国的网络通信框架 官方网址 www.networkcomms.net 中文网址www.networkcomms.cn 在网络通信程序中,本地的类或者对象,要传输 ...