jq-demo-日历
<!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-日历的更多相关文章
- jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- jq demo 简单的图片懒加载效果
重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...
- jq demo 点击弹窗,居中,可滚动,可拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq demo 点击评分组件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq demo 九宫格抽奖
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 点击选中元素左右移动
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Web前端框架汇总
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...
- java前端选择
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...
随机推荐
- 案例- CSS 三角加强
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决码云未配置公钥问题——fatal: Could not read from remote repository.
使用码云,键入“git push -u origin master” ,遇到如下问题: fatal: Could not read from remote repository.(致命:不能读远端仓库 ...
- 华视身份证读卡器获取uid号vue单文件组件版本
<template> <div id="app" ref="app"> <object ref="CertCtl&quo ...
- nodejs express的基本用法
demo /** * Created by ZXW on 2017/11/6. */ var express=require("express"); var server=expr ...
- PHP 的 new static 和 new self
下面我们举个例子: class Father { public static function getSelf() { return new self(); } public static funct ...
- Delphi如何获取一个字符串再另一个字符串中最后一次出现的位置
uses StrUtils; function ReversePos(SubStr, S: String): Integer; var i : Integer; begin i := Po ...
- java des 加密/解密
JAVA实现 加密 注意:DES加密和解密过程中,密钥长度都必须是8的倍数 public byte[] desCrypto(byte[] datasource, String password) { ...
- dubbo管理平台安装
dubbo-admin.war可在网上百度去下载,但是我下载了好几个,发布上去服务启动都报错,这个时候大概是我们系统的JDK和编译dubbo-admin.war的JDK版本不同导致的了,强烈建议自己下 ...
- push declined due to email privacy restrictions
使用git push到Github网站的时候提示: push declined due to email privacy restrictions 原因 在Github设置里有一个隐私选项 Block ...
- XCode升级之后(7-->8),控制打印问题(打印一些烂七八糟的东西)解决办法
1. 2. 3. 搞定!