<!DOCTYPE html><html><head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./css/video.css"> <script src="./js/jquery2.1.4.min.js"></script> <title>1</title> <style type="text/css"> .box{ background: #888; color: #fff; width: 500px; } .active{ background: #000; color:#fff; } ul{ list-style: none; } li{ float: left; width: 100px; height: 100px; color: #888; background: #fff; margin: 2px; text-align: center; } .clearfix:after{ display: block; content: ""; clear: both; height: 0; } .text{ width: 500px; height: 100px; background: #f2f2f2; } </style></head><body><div id="tab" class="box" class="clearfix"> <ul class="clearfix"> <li class="active"><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>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 class="text"> <h2></h2> <p></p> </div></div></body></html><script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById("tab") var aLi=oDiv.getElementsByTagName('li') var tex=oDiv.getElementsByClassName("div")[0] for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onmouseover=function () { for(var i=0;i<aLi.length;i++) { aLi[i].className=""; } this.className="active"; tex.innerHTML="<h2>1</h2><p>2</p>"; }; }; }</script>
添加回答
举报
0/150
提交
取消