Single-page calendar
2018-10-07 本文已影响0人
Jadon7
<!DOCTYPE html>
<html>
<head>
<title>Single-page calendar</title>
</head>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById('tab');
var aLi=oDiv.getElementsByTagName('li');
var aDiv=oDiv.getElementsByTagName('div')[0];
var event=['大数据移动端走查','文档加密需求解读','推动雪碧图','相册筛选','界面美化','第三阶段设计','周楠要求作品集','文档转存文档传输走查','推动Json文件','第二周工作进度','大事记图样式调整暂不调整时间组件所以暂时搁置','大事记图需要切换Excel/Pdf不确定是不是下个版本做']
for (var i = 0; i < aLi.length; i++) {
aLi[i].index=i+1;
aLi[i].onmouseover =function()
{
for (var i = 0; i < aLi.length; i++) {
aLi[i].className='';
}
this.className='active';
// alert(aDiv.innerHTML);
aDiv.innerHTML='<h2>'+this.index+'月活动</h2><p>'+event[this.index-1]+'</p>';
}
}
}
</script>
<style type="text/css">
.bg{
width: 380px;
background-color: #eee;
margin:0 auto;
padding: 10px;
}
ul{
padding: 0;
margin: 0;
}
li{
margin: 10px;
width: 100px;
height: 100px;
display:inline-block;
color: #fff;
background-color: #333;
text-align: center;
list-style-type:none;
}
.active{
color: #333;
background-color: #fff;
border: 3px solid #333;
margin: 7px;
}
.text{
margin: 10px;
padding: 1px 20px;
background-color: #fff;
}
</style>
<body>
<div id="tab" class="bg">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</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 class="text">
<h2>1月活动</h2>
<p>1月文字内容</p>
</div>
</div>
</body>
</html>
