js日历_#eae9e9-CSDN博客

本文链接：https://blog.csdn.net/qq_25077777/article/details/51126072
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
     *{padding: 0;margin: 0;}
     li{list-style: none;}
     body{background: #f6f9fc;font-family: arial;}
     .div1 {width: 210px;margin: 0 auto;padding: 10px 10px 20px 20px;background: #eae9e9;}
     .div1 ul{width: 210px;overflow: hidden;padding-bottom: 10px;}
     .div1 li{float: left;width: 58px;height: 54px;margin: 10px 10px 0 0 ;border: 1px solid #fff;background: #424242;color: #fff;text-align: center;cursor: pointer;}
      .div1 li h2{font-size: 20px;padding-top: 5px;}
      .div1 li p{font-size: 14px;}
      .div1 .active{border: 1px solid #424242;background: #fff;color: #e84a7e;}
      .div1 .active h2{}
      .div1 .active p{font-weight: bold;}
      .div1 .test{width: 178px;padding:0 q0px 10px;border: 1px solid #fff;padding-top: 10px;background: #f1f1f1;color: #555;}
      .div1 .test h2{font-size: 14px;margin-bottom: 10px;}
      .div1 .test p{font-size: 12px;line-height: 18px;}
	</style>
	<script type="text/javascript">
	var InnerText=[
		"1","2","3","4","5","6","7","8","9","10","11","12"
	];
	window.οnlοad=function()
	{
		var div=document.getElementById('tab');
		var libt=div.getElementsByTagName('ul')[0].getElementsByTagName('li');
		var i=0;
		for (var i = 0; i < libt.length; i++) {
			libt[i].οnmοuseοver=select;
		}
	};
	function select(){
		var div=document.getElementById('tab');
		var libt=div.getElementsByTagName('ul')[0].getElementsByTagName('li');
		var divContent=div.getElementsByTagName('div')[0];
		var InnterHtml='';
		var i=0;
        for (var i = 0; i < libt.length; i++) {
        	libt[i].className='';
        }
        for (var i = 0; i < libt.length; i++) {
        	if (libt[i]===this) {
        		libt.className='active';
        		InnterHtml="<h2>"+(i+1)+"月活动</h2>";
        		InnterHtml+="<p>"+InnerText[i]+"<p/>";
        		divContent.innerHTML=InnterHtml;        	}
        }
	}
	</script>
</head>
<body>
<div id="tab" class="div1">
<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="test">
		<h2>1月活动</h2>
		<p>快过年了，该发钱啦~~~~</p>
	</div>
</div>
</body>
</html>