问题描述
- 用javascript实现选项卡功能
-
写了一个页面，想用javascript实现选项卡的功能，但是没有成功，找了好久都不知道问题出现在
哪里，求各位大神指教，下面是代码：<!DOCTYPE html> <html> <head> <title>选项卡</title> <meta charset="UTF-8"> <style type="text/css"> *{margin: 0;padding: 0;} ul{list-style-type: none;} #all-content{ width: 300px; height: 200px; margin: 50px auto; } #ul1{ height: 30px; width: 202px; border-bottom: 2px solid red; } #ul1 li{ display: inline-block; width: 50px; height: 28px; text-align: center; margin-left: 10px; border: 1px solid #999; border-bottom: none; } #ul1 li:hover{cursor: pointer;} #ul1 li.active{ border-top: 2px solid red; border-bottom: 2px solid #FFFFFF; } #all-content div{ width: 200px; height: 150px; border: 1px solid blue; border-top: none; } .show{display: block;} .hide{display: none;} </style> <script type="text/javascript"> window.onLoad=function(){ var aul=document.getElementById("ul1"); var ali=aul.getElementsByTagName("li"); var ald=document.getElementById("all-content"); var adiv=ald.getElementsByTagName("div"); 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"; for(var j=0;j<adiv.length;j++){ adiv[j].className="hide"; } adiv[this.index]="show"; } } } </script> </head> <body> <div id="all-content"> <ul id="ul1"> <li class="active">房产</li> <li>家居</li> <li>二手房</li> </ul> <div> <ul> <li>aaaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbbb</li> <li>ccccccccccccccc</li> <li>ddddddddddddddd</li> </ul> </div> <div class="hide"> <ul> <li>woshinideduyiwuer</li> <li>hellokugouhowarey</li> <li>cbdcfjbvfrjvejuvr</li> <li>cbdjskfeygshanhed</li> </ul> </div> <div class="hide"> <ul> <li>hahahahahahahahaha</li> <li>hahahahahahahahaha</li> <li>hahahahahahahahaha</li> <li>hahahahahahahahaha</li> </ul> </div> </div> </body> </html>
解决方案
HTML+JavaScript实现选项卡功能
Android 选项卡功能的实现
Android中选项卡功能的实现
----------------------
解决方案二：
window.onLoad=function(){
是onload，l是小写
另
adiv[this.index]="show";
这么写不对吧
adiv[this.index].className="show";
其他自己改完看看
时间： 2024-07-28 12:50:32