|
<!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 { width: 300px; height: 500px; margin: 0 auto; background-color: gray; padding: 20px; overflow: hidden; } #box .motherbox { width: 350px; height: 350px; } .sel li { width: 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 { width: 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> 来源：https://www./content-4-702051.html |
|
|
