我按着视频上的教程做的,这是我的代码
<!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的都不生效了
请问问题出在哪里呀???
慕UI8820655
慕UI8820655
慕的地6079101
相关分类