首页 > 代码库 > 日历选项卡

日历选项卡

2024-09-01 10:04:15   216人阅读

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>日历</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		#contain{max-width:350px;border: 2px solid red;margin:0 auto;}
		ul{padding-bottom:10px;}
		ul,li{list-style-type: none;}
		ul li{width: 100px;height: 100px;text-align: center;line-height: 100px;color:#fff;float: left;border:1px solid red;background: #6F6363;margin-left:10px;margin-top:10px;display:block;}
		ul:after{content:"";display:block;height:0;clear:both;}
		.active{background: #ccc;}
		.text{min-height:100px;border:2px solid red;margin:0 auto;}
	</style>
	<script type="text/javascript">
	var aDaras=[//数组用来存放数据
	‘快过年了，去哪玩啊。‘,
	‘第二个月了，假期好短‘,
	‘第三个月。。。‘,
	‘第四个月。。。‘,
	‘第五个月。。。‘,
	‘第六个月。。。‘,
	‘第七个月。。。‘,
	‘第八个月。。。‘,
	‘第九个月。。。‘,
	‘第十个月。。。‘,
	‘第十一个月。。。‘,
	‘第十二个月。。。‘,
	];
	window.onload=function(){
		var aLi=document.getElementsByTagName(‘li‘);
		var oTxt=document.getElementById(‘contain‘).getElementsByTagName(‘div‘)[0];
		var i=0;
		for(i=0;i<aLi.length;i++){
			aLi[i].index=i;//给i加上一个索引值
			aLi[i].onmouseover=function(){
				for(i=0;i<aLi.length;i++){
					aLi[i].className=‘‘;
				}
				this.className=‘active‘;
				oTxt.innerHTML=‘<h2>‘+(this.index+1)+‘月活动</h2><p>‘+aDaras[this.index]+‘</p>‘;//在div中加入内容
			}
		}
	}
	
	</script>
</head>
<body>
	<div id="contain">
		<ul>
			<li class="active"><h2>1</h2></li>
			<li><h2>2</h2></li>
			<li><h2>3</h2></li>
			<li><h2>4</h2></li>
			<li><h2>5</h2></li>
			<li><h2>6</h2></li>
			<li><h2>7</h2></li>
			<li><h2>8</h2></li>
			<li><h2>9</h2></li>
			<li><h2>10</h2></li>
			<li><h2>11</h2></li>
			<li><h2>12</h2></li>
		</ul>
		<div class="text">
			<h2>1月活动</h2>
			<p>快过年了，去哪玩啊。</p>
		</div>
	</div>
</body>
</html>

 

查看范例

日历选项卡


联系
我们