<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .center { width: 270px; height: 300px; background: antiquewhite; margin: 0 auto; } li { display: inline-block; width: 50px; height: 50px; list-style: none; background: black; color: white; margin-left: 26px; margin-top: 20px; padding: auto; } .buttom { background: aliceblue; margin: 0 auto; width: 250px; height: 80px; padding: 10px; } h2 { margin-left: 14px; } ul li p { margin-left: 10px; } } .active { background: white; color: red; } </style> <script type="text/javascript"> window.onload = function() { var arr=[ ? ?11111111111111111111111111111111, ? ?2222222222222222222222222222222, ? ?3333333333333333333333333, ? ?4444444444444444444444444444, ? ?555555555555555555555555, ? ?6666666666666666666666 ] var odiv = document.getElementById("div1"); var oli = odiv.getElementsByTagName("li"); var ldiv = odiv.getElementsByTagName("div")[0] for (var i = 0; i < oli.length; i++) { oli[i].index=i; oli[i].onmouseover = function() { for (var j = 0; j < oli.length; j++) { oli[j].className = ""; } this.className = "active"; ? ? ? ?ldiv.innerHTML='<h2>'+(this.index+1)+'月份</h2><p>'+arr[this.index]+'</p>' } } } </script> </head> <body> <div id="div1" class="center"> <ul> <li> <h2>1</h2> <p>Jan</p> </li> <li> <h2>2</h2> <p>Feb</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>Jun</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="" class="buttom"> <h2>1月份</h2> <p>1月份來了</p> </div> </div> </body></html>
事件無法顯示,求大神看看那里出錯了
Youruncle
2016-08-02 16:20:43
