求救大佬们看看是哪里出错了？
慕粉0924426887
2019-07-26 17:27
<!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的下标
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);//添加定时器，设置时间
}
</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>
1回答
-
- qq_慕圣3038191
- 2020-03-09 00:14:06
var ps=$('menu-ll').getElementsByTagName('p');//获取p跟ul的下标 //错误
改成var ps = document.getElementsByTagName('p')
var uls=$('menu-hh').getElementsByTagName('ul'); //错误
改成var uls= document.getElementsByTagName('ul')
还有这一段
if(sy>=ps.length){//做一个判断以至于不会一直加下去
ps=0;
}
ps = 0 ///你想表达 sy = 0 ，大哥仔细点，都是很基础的，js代码不要放在html前面，
Tab选项卡切换效果
65469 学习 · 533 问题
相似问题