简单年历

最新推荐文章于 2022-11-12 23:04:54 发布

DB-Ruan

最新推荐文章于 2022-11-12 23:04:54 发布

阅读量414

点赞数

分类专栏： JavaScript 技术日志 css

本文链接：https://blog.csdn.net/feizhoujeep/article/details/38859903

版权

JavaScript 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

技术日志

23 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

思路：

跟选项卡的做法类似：

遍历12个DIV或者LI，为每个DIV添加ONMOUSEOVER事件。事件中，遍历12个DIV，首先去掉每一个DIV的className值，然后为当前DIV添加className属性，同时为下面的对应文本说明框中用数组的方法赋值。注意：为了确保每一个点击赋的值都是对应的，要用到每个按钮的this.index自定义属性，确保按钮和文本框内容保持一一对应。

代码：

<html>
	<head>
		<meta charset="utf-8"/>
		<title>简易年历</title>
		<style>
			*{padding:0;margin:0;}
			.wrapper{width:180px;padding:20px 10px 20px 10px; background:#FFC; margin:200px auto;}
			.monthTag{width:180px; height:auto;}
			.month{width:30px; height:30px;  padding:5px 10px 10px 10px;  background:#333; color:white; margin:0 10px 10px 0; float:left; text-align:center; font-weight:bold;}
			.des{width:158px; height:80px;border:1px solid white; padding:10px;}
			.activeMonth{width:30px; height:30px;  padding:5px 10px 10px 10px;  background:#fff; color:red; margin:0 10px 10px 0; float:left; text-align:center;}
			.des h3{margin-bottom:10px;}
		</style>
		<script>
			window.οnlοad=function(){
				oWrapper=document.getElementById("monthTag");
				oMonth=oWrapper.getElementsByTagName("div");
				oTxt=document.getElementById("des");
				//alert(oMonth.length);
				for(var i=0;i<oMonth.length;i++){
					oMonth[i].index=i;
					oMonth[i].οnmοuseοver=function(){
						for(var j=0;j<oMonth.length-1;j++){
							oMonth[j].className="month";
						}
						this.className="activeMonth";
						oTxt.innerHTML=myArray[this.index];
					}
				}
			}
			var myArray=new Array();
			myArray[0]="<h3>1月</h3><p>亲爱的朋友，寒冬仍在继续，请注意保暖</p>";
			myArray[1]="<h3>2月</h3><p>快过年了，给您的亲朋好友送上最美好的祝福！</p>";
			myArray[2]="<h3>3月</h3><p>春天快来了，让我们一起去踏青吧。</p>";
			myArray[3]="<h3>4月</h3><p>你是否感觉到时间过得太快了呢？</p>";
			myArray[4]="<h3>5月</h3><p>一年的黄金时间就在这时了。";
			myArray[5]="<h3>6月</h3><p>注意保暖</p>";
			myArray[6]="<h3>7月</h3><p>注意保暖</p>";
			myArray[7]="<h3>8月</h3><p>注意保暖</p>";
			myArray[8]="<h3>9月</h3><p>注意保暖</p>";
			myArray[9]="<h3>10月</h3><p>注意保暖</p>";
			myArray[10]="<h3>11月</h3><p>注意保暖</p>";
			myArray[11]="<h3>12月</h3><p>注意保暖</p>";			
		</script>
	</head>
	<body>
		<div class="wrapper" id="wrapper">
			<div class="monthTag" id="monthTag">
				<div class="activeMonth"><p>1<br/>FEB</p></div>
				<div class="month"><p>2<br/>FEB</p></div>
				<div class="month"><p>3<br/>MAR</p></div>
				<div class="month"><p>4<br/>APR</p></div>
				<div class="month"><p>5<br/>MAY</p></div>
				<div class="month"><p>6<br/>JUN</p></div>
				<div class="month"><p>7<br/>JUL</p></div>
				<div class="month"><p>8<br/>AUG</p></div>
				<div class="month"><p>9<br/>SEP</p></div>
				<div class="month"><p>10<br/>OCT</p></div>
				<div class="month"><p>11<br/>NOV</p></div>
				<div class="month"><p>12<br/>DEC</p></div>
				<div style="clear:both; width:0;height:0;margin:0;padding:0;"></div>
			</div>
			<div class="des" id="des">
			<h3>一月</h3>
            <p>寒冬还在继续中，请注意保暖</p>
			</div>		
		</div>
	</bodY>
</html>

注意：如果如果子元素的设定了浮动属性，那么父元素如果没有设置高度，那么父元素是不会被撑起来的。要解决这个问题，可以在浮动元素后面加入一个空置的DIV。