这篇文章主要为大家分享了 JS 制作类似于选项卡切换的年历, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/CSS">
- #box{ background-color: green; border-radius: 20px; padding: 10px; height:
- 800px; width: 450px; margin: 20px auto; } ul,li{ margin: 0; padding: 0;
- list-style-type: none; } ul{ overflow: hidden; } li{ background-color:
- yellow; height: 120px; width:120px; float: left; margin: 10px; text-align:
- center; color:blueviolet; } #bottom{ margin: 10px; } .active{ background-color:
- crimson; }
- </style>
- </head>
- <body>
- <div id="box">
- <ul>
- <li class="active">
- <h2>
- 一月
- </h2>
- <p>
- January
- </p>
- </li>
- <li>
- <h2>
- 二月
- </h2>
- <p>
- February
- </p>
- </li>
- <li>
- <h2>
- 三月
- </h2>
- <p>
- March
- </p>
- </li>
- <li>
- <h2>
- 四月
- </h2>
- <p>
- April
- </p>
- </li>
- <li>
- <h2>
- 五月
- </h2>
- <p>
- May
- </p>
- </li>
- <li>
- <h2>
- 六月
- </h2>
- <p>
- June
- </p>
- </li>
- <li>
- <h2>
- 七月
- </h2>
- <p>
- July
- </p>
- </li>
- <li>
- <h2>
- 八月
- </h2>
- <p>
- August
- </p>
- </li>
- <li>
- <h2>
- 九月
- </h2>
- <p>
- September
- </p>
- </li>
- <li>
- <h2>
- 十月
- </h2>
- <p>
- October
- </p>
- </li>
- <li>
- <h2>
- 十一月
- </h2>
- <p>
- November
- </p>
- </li>
- <li>
- <h2>
- 十二月
- </h2>
- <p>
- December
- </p>
- </li>
- </ul>
- <div id="bottom">
- <h2>
- 一月
- </h2>
- <p>
- 天气很好,去哪里玩呢???
- </p>
- </div>
- </div>
- <script type="text/javascript">
- var box = document.getElementById("box");
- var bottom = document.getElementById("bottom");
- var li = box.getElementsByTagName("li");
- for (var i = 0; i < li.length; i++) {
- li[i].index = i;
- var arr = ["一月吃牛排", "二月吃意面", "三月看帅哥", "四月看星星", "五月吃猪蹄", "六月吃西瓜", "七月吃雪糕", "八月吹空调", "九月捡树叶", "十月吃烤鸡", "十一月吃麻辣烫", "十二月回家过年"];
- li[i].onmouseover = function() { //事件绑定
- for (var i = 0; i < li.length; i++) {
- //清除所有的li的className
- li[i].className = " ";
- }
- this.className = "active"; //给当前的li添加className
- bottom.innerHTML = '<h2>' + (this.index + 1) + '月活动 </h2><p>' + arr[this.index] + '</p>';
- }
- }
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0523/329921.html