标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>万年历</title> <style type="text/css"> *{margin:0;padding:0;} .box{width:380px;height:600px;background:#ccc;margin:30px auto;padding:10px 0 0 20px } .box ul{width:360px; height:480px; background:#f0f} .box li{width:100px;height:100px;background:#222;color:#fff;list-style:none;line-height:100px;font-size:20px;text-align:center;float:left;margin:10px;cursor:pointer;} #txt{width:355px;height:70px;border:2px solid red;margin-top:20px;font-size:18px;color:#00f} .box .change{background:#fff;color:red;}; </style> <script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName("li"); var arr = ["新的一年，加油!","2月龙抬头！","3月放风筝","4月，滚去学习", "5月，玩命心跳","6月，我用双手成就你的梦想","7月，生日快乐！","尼玛，热成狗。", "千峰学习ing","好像有7天长假^_^","光棍节快乐，禁止淘宝","happy new year！"]; var oTxt = document.getElementById("txt"); for(var i = 0;i < aLi.length;i++){ aLi[i].index = i; //index：英文名为索引。给每个li添加一个索引，并将i（0-11）赋值给这个索引。 aLi[i].onclick = function(){ for(var j = 0;j < aLi.length;j++){ aLi[j].className = ""; //当点击li（a）后再点击li（b），则会发现li（a）的样式并没有返回初始样式，使他的className为空就好。 } aLi[this.index].className = "change"; // 这里的this指的是当前被点击的某个li，点击之后给他添加一个className，以此修改该li的样式。
oTxt.innerHTML = arr[this.index]; //同样的，改变下面div里面的内容，已达到备忘录的效果。 } } } </script> </head> <body> <div class="box"> <ul> <li>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 id="txt"> <p>我于杀戮之中绽放，亦如黎明前的花朵。</p> </div> </div> </body> </html>
这是效果图，大家感兴趣的可以自己修改一下css样式外观
标签：
原文地址：http://www.cnblogs.com/maxqi/p/5781946.html
