基于JavaScript实现Tab选项卡切换效果
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; } .box{ width:500px; height:400px; border:1pxsolid#ccc; margin:100pxauto; overflow:hidden; } ul{ width:600px; height:40px; margin-left:-1px; list-style:none; } li{ float:left; width:101px; height:40px; text-align:center; font:60018px/40px"simsun"; background-color:pink; cursor:pointer; } span{ display:none; width:500px; height:360px; background-color:yellow; text-align:center; font:700150px/360px"simsun"; } .show{ display:block; } .current{ background-color:yellow; } </style> <script> window.onload=function(){ varboxArr=document.getElementsByClassName("box"); for(vari=0;i<boxArr.length;i++){ fn(boxArr[i]); } functionfn(ele){ varliArr=ele.getElementsByTagName("li"); varspanArr=ele.getElementsByTagName("span"); for(vari=0;i<liArr.length;i++){ liArr[i].index=i; liArr[i].onmouseover=function(){ for(varj=0;j<liArr.length;j++){ liArr[j].className=""; spanArr[j].className=""; } this.className="current"; spanArr[this.index].className="show"; } } } } </script> </head> <body> <divclass="box"> <ul> <liclass="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裤子</li> <li>裙子</li> </ul> <spanclass="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裤子</span> <span>裙子</span> </div> <divclass="box"> <ul> <liclass="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裤子</li> <li>裙子</li> </ul> <spanclass="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裤子</span> <span>裙子</span> </div> <divclass="box"> <ul> <liclass="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裤子</li> <li>裙子</li> </ul> <spanclass="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裤子</span> <span>裙子</span> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。