js新手关于做简易日历的基础问题

JavaScript

Ni14 2016-12-08 17:27:32

我按着视频上的教程做的，这是我的代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>简易日历</title> <style> *{ padding: 0; margin: 0; } #tab{ width:400px; height:400px; background-color:skyblue; margin:100px auto; } #tab ul{ width: 400px; height:300px; border-bottom: 2px solid rgba(50, 50, 50, 0.38); list-style: none; text-align: center; } #tab ul li{ display:inline-block; width:80px; height:80px; background-color: rgba(158, 57, 179, 0.49); margin: 5px; padding-top: 20px; box-sizing: border-box; } #div1{ padding:20px; } #tab .active{ background-color:#f6f6f6; color: red; } </style> <script> window.onload=function () { var oTab=document.getElementById("tab"); var aLi=oTab.getElementsByTagName("li"); var oTxt=oTab.getElementById("div1"); for(i=0;i<aLi.length;i++) { aLi[i].index=i; aLi[i].onmouseover=function () { for(i=0;i<aLi.length;i++) { aLi[i].className = ""; } this.className="active"; oTxt.innerHTML="<h2>"+this.index+"月份</h2><p>快过年了，商量商量去哪里玩吧</p>" }; } } </script></head><body><div id="tab"> <ul> <li><h2>1</h2><p>JAN</p></li> <li><h2>2</h2><p>FBR</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 id="div1"> <h2>1月份</h2> <p>快过年了，商量商量去哪里玩吧</p> </div></div></body></html>---------------------------------------------------------------------------------------------这样运行的话会提示一个报错-----------------------------------------------------------------------------其实我一开始是把最下面的那个div设置了class 没用id，但是那样没法用innerHTML 然后我新建了一个文件专门试了试innerHTML class的没法用innerHTML 之后设置成id才能导入但是设置成id之后我原本的onmouseover的都不生效了请问问题出在哪里呀？？？

查看完整描述

1 回答

热搜

最近搜索清空

js新手关于做简易日历的基础问题

js新手关于做简易日历的基础问题

1 回答

添加回答