Question

这段js里的如果不写onload，改成function cs（）{}。在对应的li里添加onmouseover事件，效果不变怎么改

window.onload=function(){ var sf=['冬藏', '养气', '出巡', '不日抵达', '即归', '避暑', '散心', '纳凉', '丰收', '理政', '纳妃', '跨年', ]; var a=document.getElementById('div2'); var b=a.getElementsByTagName('li'); var c=a.getElementsByTagName('div')[0]; for(var i=0; i<b.length;i++){ b[i].d=i; b[i].onmouseover=function (){ for(var i=0; i<b.length;i++){ b[i].className=''; } this.className='on'; c.innerHTML='<h2>'+(this.d+1)+'月活动</h2><p>'+sf[this.d]+'</p>' } } } .you{width:400px; height: 600px; background-color:#A7A3A4;margin: 0 auto;} .you ul{margin-left:15px;} .you ul li{width: 100px;height: 100px;list-style: none; float: left;margin-left: 20px; width: 100px;height: 100px;background-color: #333333; color: aliceblue;text-align: center;margin-top: 20px;line-height:45px} .you ul li.on{background-color: #F7F7F7; color: #F54999} .xianshi{float:left; margin-left: 30px;margin-top: 20px;width: 350px; background-color: #B8B4B4;text-align: left;word-wrap: break-word;word-break: break-all;overflow: hidden; line-height: 30px}<div id="div2" class="you"> <ul> <li><h2>1</h2><p>JAN</p></li> <li><h2>2</h2><p>FER</p></li> <li><h2>3</h2><p>MAR</p></li> <li><h2>4</h2><p>ARP</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="nei" class="xianshi"> <h2>1月活动</h2> <p>1月冬藏</p> </div> </div>





Answer 1

首先，建议你仍然采用 window.onload 的写法，不要用 function cs(){} 的写法，因为前者可以实现js代码与html代码完全分离的流行做法，利于分工合作，还可提高运行效率。

如果坚持使用后者，就这样：

var sf=['冬藏','养气','出巡','不日抵达','即归','避暑','散心','纳凉','丰收','理政','纳妃','跨年'];
function cs(e){
   var b=e.parentNode.getElementsByTagName("li");
   for(var i=0; i<b.length;i++){
      b[i].className=(b[i]==e)?'on':'';
   }
   var n=e.getElementsByTagName("h2")[0].innerHTML;
   nei.innerHTML='<h2>'+n+'月活动</h2><p>'+sf[n-1]+'</p>'
}

<div id="div2" class="you">
   <ul>
      <li onmouseover="cs(this);"><h2>1</h2><p>JAN</p></li>
      <li onmouseover="cs(this);"><h2>2</h2><p>FER</p></li>
      <li onmouseover="cs(this);"><h2>3</h2><p>MAR</p></li>
      <li onmouseover="cs(this);"><h2>4</h2><p>ARP</p></li>
      <li onmouseover="cs(this);"><h2>5</h2><p>MAY</p></li>
      <li onmouseover="cs(this);"><h2>6</h2><p>JUN</p></li>
      <li onmouseover="cs(this);"><h2>7</h2><p>JUL</p></li>
      <li onmouseover="cs(this);"><h2>8</h2><p>AUG</p></li>
      <li onmouseover="cs(this);"><h2>9</h2><p>SEP</p></li>
      <li onmouseover="cs(this);"><h2>10</h2><p>OCT</p></li>
      <li onmouseover="cs(this);"><h2>11</h2><p>NOV</p></li>
      <li onmouseover="cs(this);"><h2>12</h2><p>DEC</p></li>
   </ul>
   <div id="nei" class="xianshi">
      <h2>1月活动</h2>
      <p>1月冬藏</p>
   </div>
</div>

如果采用事件冒泡，可以简化一下代码：

var sf=['冬藏','养气','出巡','不日抵达','即归','避暑','散心','纳凉','丰收','理政','纳妃','跨年'];
function cs(e){
   var e=e||window.event;
   if(e.target.tagName=="LI"){
      var b=e.currentTarget.getElementsByTagName("li");
      for(var i=0; i<b.length;i++){
         b[i].className=(b[i]==e.target)?'on':'';
      }
      var n=e.target.getElementsByTagName("h2")[0].innerHTML;
      nei.innerHTML='<h2>'+n+'月活动</h2><p>'+sf[n-1]+'</p>'
   }
}

<div id="div2" class="you">
   <ul onmouseover="cs(event);">
      <li><h2>1</h2><p>JAN</p></li>
      <li><h2>2</h2><p>FER</p></li>
      <li><h2>3</h2><p>MAR</p></li>
      <li><h2>4</h2><p>ARP</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="nei" class="xianshi">
      <h2>1月活动</h2>
      <p>1月冬藏</p>
   </div>
</div>