日历

最新推荐文章于 2024-01-30 10:30:00 发布

Purple_

最新推荐文章于 2024-01-30 10:30:00 发布

阅读量411

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u013081066/article/details/17200483

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>innerHTML</title>
</head>
<style>
*{
margin:0 auto;
padding:0 auto;
position:relative;
}
#tab{
width:220px;
height:390px;
border:1px solid #ccc;
background:#ccc;
margin-top:20px;
}
#tab ul{
list-style:none;
margin-left:-32px;
}
#tab ul li{
width:60px;
height:60px;
border:1px solid #fff;
background:#111;
color:#fff;
font-size:12px;
text-align:center;
margin-top:10px;
margin-left:5px;
float:left;
}
#tab ul li h2{
margin-top:13px;
}
.text{
clear:both;
border:1px solid #fff;
width:195px;
height:80px;
background:#eee;
margin-bottom:-10px;
position:absolute;
top:300px;
left:12px;
}
.text h2{
font-size:90%;
margin:5px;
}
.text p{
font-size:80%;
margin-left:5px;
}
#tab .active{
background:#fff;
color:#C00;
border:1px solid #000;
}
</style>
<script>
window.οnlοad=function(){
var arr=[
'一月爸爸去哪儿',
'二月妈妈去哪儿',
'三月阁阁去哪儿',
'四月鑫鑫去哪儿',
'五月爸爸去哪儿',
'六月妈妈去哪儿',
'七月阁阁去哪儿',
'八月鑫鑫去哪儿',
'九月爸爸去哪儿',
'十月妈妈去哪儿',
'十一月阁阁去哪儿',
'十二月鑫鑫去哪儿',

];
//首先，获取到需要的div li 等
var oTab=document.getElementById("tab");
var oLi=oTab.getElementsByTagName("li");
//因为TagName是个数组，而包含txt的div是这些数组中的第一个，所以为了下面的方便，就带个数组0
var oTxt=oTab.getElementsByTagName("div")[0];

//同选项卡一样，用for循环，先将其原有的样式去掉，在重新弄上样式
for(var i=0;i<oLi.length;i++){
//还是和选项卡一样，给这些日历编一个号
oLi[i].index=i;
oLi[i].οnmοuseοver=function(){

for(var j=0;j<oLi.length;j++){
oLi[j].className="";
}
this.className="active";
//这里如果只写this.index则index 是从零开始计数的，所以最先出来的会是零,加1的时候记得带括号,另外还有p里面的内容，将这些东西全部存放在一个数组里面，然后从数组里面调用就可以咯！
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
}
}

};
</script>
<body>

<div id="tab" class="calendar">
<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>一月爸爸去哪儿</p>
</div>
</div>
</body>

</html>

这是效果