我正在使用我在网上找到的教程来满足我对项目的需求。我想添加功能按钮，可以在几天之间选择(更改＆＃34;活动＆＃34;日历中的日期)并在几个月之间选择。

我的第一个问题是如何编码上一天和下一天的按钮，根据css将上一天和下一天更改为活动状态？

＆＃13;

＆＃13;

* {

box-sizing: border-box;

}

ul {

list-style-type: none;

}

body {

font-family: Verdana, sans-serif;

}

.month {

padding: 70px 25px;

width: 100%;

background: #1abc9c;

}

.month ul {

margin: 0;

padding: 0;

}

.month ul li {

color: white;

font-size: 40px;

text-transform: uppercase;

letter-spacing: 3px;

}

.month .prev {

float: left;

padding-top: 10px;

}

.month .prevDay {

float: left;

}

.month .next {

float: right;

padding-top: 10px;

}

.month .nextDay {

float: right;

}

.weekdays {

margin: 0;

padding: 10px 0;

background-color: #ddd;

}

.weekdays li {

display: inline-block;

width: 13.6%;

color: #666;

text-align: center;

}

.days {

padding: 10px 0;

background: #eee;

margin: 0;

}

.days li {

list-style-type: none;

display: inline-block;

width: 13.6%;

text-align: center;

margin-bottom: 5px;

font-size: 12px;

color: #777;

}

.days li .active {

padding: 5px;

background: #1abc9c;

color: white !important

}

/* Add media queries for smaller screens */

@media screen and (max-width: 720px) {

.weekdays li,

.days li {

width: 13.1%;

}

}

@media screen and (max-width: 420px) {

.weekdays li,

.days li {

width: 12.5%;

}

.days li .active {

padding: 2px;

}

}

@media screen and (max-width: 290px) {

.weekdays li,

.days li {

width: 12.2%;

}

}

.pM_button {

padding: 15px 25px;

font-size: 24px;

text-align: center;

cursor: pointer;

outline: none;

color: #cc9900;

background-color: #ffff00;

border: none;

border-radius: 15px;

box-shadow: 0 9px #999;

}

.pM_button:hover {

background-color: #ffff00

}

.pM_button:active {

background-color: #ffcc00;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

.nM_button {

padding: 15px 25px;

font-size: 24px;

text-align: center;

cursor: pointer;

outline: none;

color: #ffffff;

background-color: #9900cc;

border: none;

border-radius: 15px;

box-shadow: 0 9px #999;

}

.nM_button:hover {

background-color: #9900cc

}

.nM_button:active {

background-color: #660066;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

.nD_button {

padding: 15px 25px;

font-size: 24px;

text-align: center;

cursor: pointer;

outline: none;

color: #ffffff;

background-color: #ff0000;

border: none;

border-radius: 15px;

box-shadow: 0 9px #999;

}

.nD_button:hover {

background-color: #ff0000

}

.nD_button:active {

background-color: #800000;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

.pD_button {

padding: 15px 25px;

font-size: 24px;

text-align: center;

cursor: pointer;

outline: none;

color: #ffffff;

background-color: #33cc33;

border: none;

border-radius: 15px;

box-shadow: 0 9px #999;

}

.pD_button:hover {

background-color: #33cc33

}

.pD_button:active {

background-color: #009900;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

• Mo
• Tu
• We
• Th
• Fr
• Sa
• Su

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

function GetKey(e) {

var code;

if (!e) var e = window.event;

if (e.keyCode) code = e.keyCode;

else if (e.which) code = e.which;

//var character = String.fromCharCode(code);

setTimeout('ShowTree(' + code + ');', 100);

}

function nextDay() {

}

function ShowTree(character, k) {

//Main Menu Key

if (character == 106) {

cWindow.close();

}

//Close Key

if (character == 111) {

alert(" Key: / ");

responsiveVoice.speak("Close ", "UK English Male ");

}

//PageUP Key, next month

if (character == 98) {

alert(" Key: 2 ");

responsiveVoice.speak("Page Up ", "UK English Male ");

}

//PageDOWN key, previous month

if (character == 99) {

alert(" Key: 3 ");

responsiveVoice.speak("Page Down ", "UK English Male ");

}

//Previous Key, Previous Day

if (character == 65) { //keypad key 101

responsiveVoice.speak("Previous ", "UK English Male ");

//alert(" Key: 5 ");

}

//Next Key, Next Day

if (character == 68) { //keypad key 102

responsiveVoice.speak("Next ", "UK English Male ");

$(".pD_button ").click(.days.active++);

//alert(" Key: 6 ");

}

//Select Key

if (character == 83) { //keypad key 104

responsiveVoice.speak("Select ", "UK English Male ");

}

//alert(" Key: 8 ");

}

＆＃13;＆＃13;＆＃13;