求救大佬們看看是哪里出錯了?
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ?padding:0;
? ? ?font-size:13px;
? ? ?list-style:none;}
.menu{width:210px;
? ? ? margin:50px auto;
? ? ? border:1px solid #ccc;}
.menu p{height:25px;
? ? ? ? line-height:25px;
? ? ? ? font-weight:bold;
? ? ? ? background:#eee;
? ? ? ? border-bottom:1px solid #ccc;
? ? ? ? cursor:pointer;
? ? ? ? padding-left:5px;}
.menu div ul{display:none;}
.menu li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
</style>
<script type="text/javascript">
function $(id){
return typeof id==='string' ? document.getElementById(id):id;
}
window.onload=tab;
function tab(){
var sy=0;//定義一個索引初始為0
var tits=null;//定義一個定時器先為空
var ps=$('menu-ll').getElementsByTagName('p');//獲取p跟ul的下標(biāo)
var uls=$('menu-hh').getElementsByTagName('ul');
tits=setInterval(function(){
sy++;//讓索引遞增
if(sy>=ps.length){//做一個判斷以至于不會一直加下去
ps=0;
}
// console.log(sy);//為遞增過后的索引做打印
for(var j=0;j<ps.length;j++){
uls[j].style.display='none';
}
uls[sy].style.display="block";
},2000);//添加定時器,設(shè)置時間
}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p class="menu-ll" id="menu-ll">Web前端</p>
<ul class="menu-hh" id="menu-hh" style="display:block">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p class="menu-ll" id="menu-ll">后臺腳本</p>
<ul class="menu-hh" id="menu-hh">
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p class="menu-ll" id="menu-ll">前端框架</p>
<ul class="menu-hh" id="menu-hh">
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>
2020-03-09
var ps=$('menu-ll').getElementsByTagName('p');//獲取p跟ul的下標(biāo)? //錯誤
改成var?ps?=?document.getElementsByTagName('p')
var uls=$('menu-hh').getElementsByTagName('ul'); //錯誤
改成var?uls=?document.getElementsByTagName('ul')
還有這一段?
if(sy>=ps.length){//做一個判斷以至于不會一直加下去
ps=0;
}
ps = 0 ///你想表達(dá)?sy = 0 ,大哥仔細(xì)點,都是很基礎(chǔ)的,js代碼不要放在html前面,