<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
li {
list-style: none;
}
#box {
300px;
height: 500px;
margin: 0 auto;
background-color: gray;
padding: 20px;
overflow: hidden;
}
#box .motherbox {
350px;
height: 350px;
}
.sel li {
80px;
height: 80px;
background-color: black;
float: left;
margin: 0 10px 10px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
font-size: 18px;
font-weight: bolder;
}
#box .sel .active {
border: 1px solid black;
color: crimson;
background-color: white;
}
#box .activity {
260px;
padding: 10px;
background-color: rgb(201, 197, 197);
}
#box .activity strong {
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="box">
<div class="motherbox">
<ul class="sel">
<li>
<em>1</em>
<strong>JAN</strong>
</li>
<li>
<em>2</em>
<strong>FER</strong>
</li>
<li>
<em>3</em>
<strong>MAR</strong>
</li>
<li>
<em>4</em>
<strong>APR</strong>
</li>
<li>
<em>5</em>
<strong>MAY</strong>
</li>
<li>
<em>6</em>
<strong>JUN</strong>
</li>
<li>
<em>7</em>
<strong>JUL</strong>
</li>
<li>
<em>8</em>
<strong>AUG</strong>
</li>
<li>
<em>9</em>
<strong>SEP</strong>
</li>
<li>
<em>10</em>
<strong>OCT</strong>
</li>
<li>
<em>11</em>
<strong>NOV</strong>
</li>
<li>
<em>12</em>
<strong>DEC</strong>
</li>
</ul>
</div>
<p class="activity">
<strong>1月活动</strong>
<span>快过年了，大家可以商量着去哪里玩吧~</span>
</p>
</div>
</body>
</html>
<script>
var arr = ["元旦：1月1日至3日放假三天。", "春节：2月2日至8日放假7天。", "妇女节：3月8日妇女节，与我无关。", "清明节：4月3日至5日放假3天", "劳动节：4月30日至5月2日放假3天。", "端午节：6月4日至6日放假3天。", "小暑：7月7日小暑。不放假。", "七夕节：8月6日七夕节。不放假。", "中秋节：9月10日至12日放假3天。", "国庆节：10月1日至7日放假7天。", "立冬：11月8日立冬。不放假。", "废除奴隶制国际日:12月2日。"]
var oli = document.querySelectorAll("li");
var ostr = document.querySelector(".activity strong")
var ospan = document.querySelector("span");
console.log(ostr)
for (var i = 0; i < oli.length; i++) {
oli[i].index = i;
oli[i].onclick = function () {
for (var i = 0; i < oli.length; i++) {
oli[i].className = "";//清空格式，否则点击过的都会为active的样式
}
this.className = "active";//点击时按钮的样式
for (var j = 0; j < arr.length; j++) {
ospan.innerHTML = arr[this.index];//点击按钮时span内容改变
ostr.innerHTML = this.index + 1;//点击按钮时strong内容发生改变
}
}
}
</script>