JS中实现一个简单日历
<script>
window.οnlοad=function()
{
var arr=[
'一月好啊啊啊',//JS中的数组
'二月好啊啊啊',
'三月好啊啊啊',
'四月好啊啊啊',
'五月好啊啊啊',
'六月好啊啊啊',
];
var oDiv=document.getElementById('tab');
var aLi=oDiv.getElementsByTagName('li');
var oTxt=oDiv.getElementsByTagName('div')[0];
for(var i=0;i<aLi.length;i++)
{
aLi[i].index=i;//JS中动态添加自定义属性
aLi[i].οnmοuseοver=function()
{
for(var i=0;i<aLi.length;i++)
{
aLi[i].className='';//先清空属性
}
this.className='active';//将选中的class变为active
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';//拼接符号+
};
}
};
</script>
html部分
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>一月</p></li>
<li><h2>2</h2><p>二月</p></li>
<li><h2>3</h2><p>三月</p></li>
<li><h2>4</h2><p>四月</p></li>
<li><h2>5</h2><p>五月</p></li>
<li><h2>6</h2><p>六月</p></li>
</ul>
<div class='text'>
<h2>一月活动</h2>
<p>快过年了!</p>
</div>
</div>
</body>