html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #div1{ width:600px; height:700px; border:1px solid red; margin:0 auto 0 auto; border-radius: 20px 20px 20px 20px; } ul{ list-style-type: none; margin:0 auto 0 auto; line-height: 100px; } ul li{ width:100px; height:30px; border:1px solid red; text-align: center; line-height: 30px; display: inline-block; border-radius: 20px 20px 20px 20px; margin-left:50px; cursor: pointer; background-color: #ccc; } ul li.qjg{ background-color:#AAFF05; } ul li a{ text-decoration: none; color:#000; } ul li a:hover{ text-decoration: underline; color:#000; } #div2 div{ width:600px; height:600px; border:1px solid red; border-radius: 20px 20px 20px 20px; display: none; } #div2 div.rhx{ display: block; } #div2 div.rhx img{ max-height: 100%; max-width: 100%; border:1px solid red; border-radius: 20px 20px 20px 20px; } #div2 div img{ max-height: 100%; max-width: 100%; border:1px solid red; border-radius: 20px 20px 20px 20px; } </style> <body> <div id="div1"> <ul id="ul"> <li class="qjg"><a href="">男装</a></li> <li><a href="">女装</a></li> <li><a href="">冬装</a></li> </ul> <div id="div2"> <div class="rhx"> <img src="1.jpg" alt="这是老苍哦" title="这是老苍哦"> <img src="2.jpg" alt="这是老苍哦" title="这是老苍哦"> <img src="3.jpg" alt="这是老苍哦" title="这是老苍哦"> </div> <div> <img src="4.jpg" alt="这是老苍哦" title="这是老苍哦"> <img src="8.jpg" alt="这是老苍哦" title="这是老苍哦"> <img src="9.jpg" alt="这是老苍哦" title="这是老苍哦"> </div> <div> <img src="1.jpg" alt="这是老苍哦" title="这是老苍哦"> <img src="2.jpg" alt="这是老苍哦" title="这是老苍哦"> <img src="3.jpg" alt="这是老苍哦" title="这是老苍哦"> </div> </div> </div> <script> var ul=document.getElementById('ul'); var li=ul.getElementsByTagName('li'); var div2=document.getElementById('div2'); var div=div2.getElementsByTagName('div'); for(var i=0; i<li.length; i++) { li[i].index=i; li[i].onmouseover=function () { for(var i=0; i<li.length; i++) { li[i].className=''; div[i].style.display='none'; // li[i].textDecoration='underline'; }; this.className='qjg'; div[this.index].style.display='block'; } }; </script> </body> </html>
评论 (5 )
最新评论
什么垃圾东西 曹尼玛的b
你能告诉我酷炫咋哪儿吗?
你能告诉我怎么个炫酷法?什么都看不了啊
完全不知道在哪里
你能告诉我酷炫咋哪儿吗?