例子：js简易日历

基本：选项卡

this 当前发生事件的元素

原理：先全部隐藏，然后将当前的显示出来

使用innerHTML：标签中间的HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易日历</title>
<style>

.clearfloat:after{
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0
} 
.clearfloat{zoom:1} 
ul{
	width:200px;
}
ul li{
	list-style-type:none;
	width:50px;
	border:1px solid #000000;
	float:left;
	text-align:center;
	margin:5px;
}
.active{
	background:#7A7272;
}
.text{
	margin-left:50px;
}
</style>
<script>
window.onload=function(){
	var oDiv=document.getElementById('tab');
	var oLi=document.getElementsByTagName('li');
	var oTxt=oDiv.getElementsByTagName('div')[0];
	var arr=[
			'一月，新年的开始！',
			 '二月啊，加油加油',
			 '三月啊，fighting',
			 '四月啊，春天来了',
			 '五月啊，劳动节',
			 '六月啊，儿童节',
			 '七月啊，夏天来了',
			 '八月啊，热热热',
			 '九月啊，秋游',
			 '十月啊，生日',
			 '十一月，加油，就剩一个月，今年就结束了',
			 '十二月，总结这一年'
			 ];
	var i=0;
	for(i=0;i<oLi.length;i++)
	{
		oLi[i].index=i;
		oLi[i].onmouseover=function()
		{
			for(i=0;i<oLi.length;i++)
			{
				oLi[i].className='';
				}
				this.className='active';
				oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
			};
		}
};
</script>
</head>

<body>
<div type="text" id="tab" class="calender">
<ul class="clearfloat">
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FEB</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>

　　

posted on 2017-03-06 11:05  想要逆袭的学渣  阅读(159)  评论(0)    收藏  举报

导航