纯js,简易日历，tab切换，内容切换

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>年历</title>
<style>
*{
margin: 0;padding: 0;
}
.div1Ul li{
list-style: none;
float: left;width: 32.5%; height: 50px;line-height: 50px;
border: 1px solid #fff;
background: #000;
color: #fff;
text-align: center;
}
#div1 div{
border: 1px solid red;
text-align: center;
float: left;
width: 100%;
}
.active{
background: #fff!important;
color: #000!important;
}
</style>
<script>
window.onload=function(){
var arr=[
"111111111",
"ssss",
"ddddddd",
"sdwecwdcw",
"xdcdscdcd",
"xdcdscdcd",
"xdcdscdcd",
"xdcdscdcd",
"xdcdscdcd",
"xdcdscdcd",
"xdcdscdcd",
"12xdcdscdcd"

];
var div1=document.getElementById("div1");
var Ullist=div1.getElementsByTagName("li");
var div2 = div1.getElementsByTagName("div")[0];
for(var i=0;i<Ullist.length;i++){
Ullist[i].index = i;
Ullist[i].onclick=function(){
for(var i=0;i<Ullist.length;i++){
Ullist[i].className="";
div2.innerHTML="";
}
this.className="active";
var index = this.index;
div2.innerHTML="<h1>"+ (index+1) + "月有活动</h1><P>"+ arr[index]+"</P>";
};
}
};
</script>
</head>
<body>
<div id="div1">
<ul class="div1Ul">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<div>
<h1>1月有活动</h1>
<P>hahhhhahaha</P>
</div>
</div>
</body>
</html>

posted @ 2018-09-01 17:07  quitpoison  阅读(185)  评论(0)    收藏  举报