<!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. 博客中引入了gitment评论系统

    官方github地址:https://github.com/imsun/gitment 官方中文说明地址:https://imsun.net/posts/gitment-introduction/ 官 ...

  2. swat - 基于web的samba管理工具

    总览 swat [ -s smb config file ] [ -a ] 描述 此程序是 samba 套件的一部分. swat 允许 samba 管理员通过web浏览器配置复杂的 smb.conf ...

  3. vCenter 6.0 vsca 安装遇到的一些小问题

    在安装vCenter 6.0 vsca的时候,安装插件到第二个的时候,会报出一个windows installer的错误.需要联系软件管理员或者技术支持的一个error. 经过多次的测试,我终于找到了 ...

  4. 特种设备TSG 认证流程

    特种设备许可,也叫安全注册(原为AZ安全注册认可),现为TS.国家为了防止和减少事故,保障人民群众生命和财产安全,促进经济发展而强制实施的安全监察.它的作用相当于欧盟的“CE”认证,但比“CE”认证更 ...

  5. c++ 兰姆达表达式

    #include<iostream> using namespace std;   int main() {     int a = 1;     int b = 2;       aut ...

  6. leyou_04_使用vue.js搭建页面—使用ajax完成品牌的查询

    1.使用vue.js搭建页面 1.1使用的模板插件Vuetify 中文UI组件官网:https://vuetifyjs.com/zh-Hans/getting-started/quick-start ...

  7. (转)OpenFire源码学习之五:用户登录

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43413377 登陆 登陆认证,客户端发送认SASL证消息: <auth mecha ...

  8. js滚动页面到固定位置进行操作

    $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $("#div& ...

  9. DNS排查技术图谱

    # DNS排查技术图谱 ## 应用程序视角- 应用程序 - 浏览器 - hostname cache - ping- 操作系统 - hostname cache - 域名解析器 - dig domai ...

  10. SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSS")时间转换问题

    SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSS")时间转换问题 程序代码: import java.text.ParseException; i ...