求指教，为什么我的#pic.active{ }在页面无法表现出来

<!DOCTYPE html>




<br> body{background-color: lightgray;margin: 0px;padding: 0px;}<br> #pic{width: 500px;height: 270px;margin: 0px auto;position: relative;}<br> #pic img{width: 500px;height: 270px;}<br> #pic ul{padding: 0px;margin: 0px;position: absolute;right: -41px;top: 0px;}<br> #pic li{list-style-type: none;width: 40px;height: 30px;margin-bottom: 10px;background-color: gray;}<br> #pic p{width: 500px;height: 30px;line-height: 30px;text-align: center;color: white;position: absolute;top: 0px;margin: 0px;<br> background-color: black}<br> #pic span{width: 500px;height: 30px;line-height: 30px;text-align: center;color: white;position: absolute;bottom: -30px;margin: 0px;<br> background-color: black;}<br> #pic.active{background-color:#CF3;}<br>
<br> window.onload = function() {<br> var oDiv = document.getElementById(&#39;pic&#39;);<br> var oSpan = oDiv.getElementsByTagName(&#39;span&#39;)[0];<br> var oImg = oDiv.getElementsByTagName(&#39;img&#39;)[0];<br> var oP = oDiv.getElementsByTagName(&#39;p&#39;)[0];<br> var oUl = oDiv.getElementsByTagName(&#39;ul&#39;)[0];<br> var aLi = oUl.getElementsByTagName(&#39;li&#39;);<br> var arrText = [&#39;DOTA2&#39;, &#39;屠夫01&#39;, &#39;屠夫02&#39;, &#39;屠夫03&#39;, &#39;龙骑士&#39;];<br> var arrUrl = [&#39;02.jpg&#39;, &#39;01.jpg&#39;, &#39;03.jpg&#39;, &#39;04.jpg&#39;, &#39;05.jpg&#39;];<br> var num = 0;<br> for (var i = 0; i &lt; arrUrl.length; i++) {<br> oUl.innerHTML += &#39;<li></li>&#39;;<br> };<br> oImg.src = arrUrl[num];<br> oP.innerHTML = 1 + num + &#39;/&#39; + arrUrl.length;<br> oSpan.innerHTML= arrText[num];<br> aLi[num].className = &#39;active&#39;;<br> for(var i = 0;i&lt; aLi.length; i++){<br> aLi[i].index =i;<br> aLi[i].onclick = function(){<br> oImg.src = arrUrl[this.index];<br> oP.innerHTML =1+this.index+&#39;/&#39;+aLi.length;<br> oSpan.innerHTML = arrText[this.index];<br> };<br> };<br> };<br>




数量正在加载中


图片正在加载中