html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{ padding: 0; margin: 0; } html,body{ width:100%; height:100%; } #div0{ /*width:500px; height:500px border:1px solid red;*/ margin-left:400px; } ul{ list-style-type: none; overflow: hidden; margin-left:40px; } ul li{ width:98px; height:30px; border:1px solid red; text-align: center; line-height: 30px; /*display: inline-block;*/ float: left; margin-right:8px; cursor: pointer; } #div1 p{ width:530px; height:500px; border:1px solid red; display: none; margin-left:40px; background-size: 100% 100%; } #div1 p.qjg{ /*width:230px; height:100px;*/ display: block; } </style> <body> <div id="div0"> <ul> <li a="0">1</li> <li a="1">2</li> <li a="2">3</li> <li a="3">4</li> <li a="4">5</li> </ul> <div id="div1"> <p class="qjg">123213</p> <p>sadsadasd</p> <p>wqewqe213123</p> <p>sadasd123213123</p> <p>zxczxczasdasdqwrqw123123213</p> </div> </div> <script> var li=document.getElementsByTagName('li'); var ap=document.getElementsByTagName('p'); var arr1=['1.jpg','2.jpg','3.jpg','4.jpg','4.jpg']; var arr2=['小邱','小红','小兰','小绿','小黑']; for(var i=0; i<li.length; i++) { li[i].index=i; ap[i].style.backgroundImage='url("' + arr1[i] +'")'; li[i].style.backgroundImage='url("' + arr2[i] +'")'; li[i].onmouseover=function () { for(var i=0; i<ap.length; i++) { ap[i].style.display='none'; li[i].innerHTML=''; }; this.innerHTML=arr2[this.index]; ap[this.index].style.display='block'; }; }; </script> </body> </html>
评论 (1 )
最新评论
鼓励鼓励