为什么不要自动切换"content+i"的内容

for(var j=0; j<4; j++){
setInterval('change(j)',5000)
}
这样写不对吗?
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none}
#wrap{margin:90px 0 0 180px;width:360px}
#menu{background:url(images/bg.jpg) repeat-x;height:32px;width:360px}
#menu ul{padding-top:4px;}
#menu li{float:left;font-size:14px;width:76px;text-align:center;line-height:28px}
#menu li a{text-decoration:none; padding-left:18px; display:block;height:28px;color:#fff}
#menu li a b{padding-right:18px;display:block;height:28px}
#menu li a:hover{background:white url(images/left.jpg) left top no-repeat;color:orange;cursor:pointer}
#menu li a.cur{background:white url(images/left.jpg) left top no-repeat;color:orange;cursor:pointer}
#menu li a.cur b{background:white url(images/right.jpg) right top no-repeat;}
#menu li a:hover b{background:white url(images/right.jpg) right top no-repeat;}.content{border:1px solid #88bdff;border-top-width:0;clear:both}
.hidden{display:none}
</style>
<script type="text/javascript"> function change(num){
var menu = document.getElementById("menu");
var list = menu.getElementsByTagName("a");
for(var i=0; i<list.length; i++){
if(i == num){
document.getElementById("content"+i).style.display = "block";
}
else{
document.getElementById("content"+i).style.display = "none";
}
}
}
for(var j=0; j<4; j++){
setInterval('change(j)',5000)
}
</script>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<li><a href="" class="cur"><b>娱乐</b></a></li>
<li><a href=""><b>电影</b></a></li>
<li><a href=""><b>电视</b></a></li>
<li><a href=""><b>音乐</b></a></li>
</ul>
</div> <div id="content0" class="content">
<ul>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
</ul>
</div>
<div id="content1" class="content hidden">
<ul>
<li><a href="">内容2</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
</ul>
</div>
<div id="content2" class="content hidden">
<ul>
<li><a href="">内容3</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
</ul>
</div>
<div id="content3" class="content hidden">
<ul>
<li><a href="">内容4</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容1</a></li>
</ul>
</div> </div></body>
</html>

解决方案 »

  1.   

    setInterval调用的方法是没参数的方法吧？
    for(var j=0; j<4; j++){
    setInterval('change(j)',5000)
    }
    你这样的写法，是想实现什么功能？
    问题一：你的字符串拼接有问题，'change(j)'这里的j变成字母j了，不是你希望具有的变量
    问题二：你这么循环，程序会创建4个setInterval，我觉得没必要吧？
      

  2.   

    楼主是要这样的效果？
    <script type="text/javascript">function change(num) {
    var menu = document.getElementById("menu");
    var list = menu.getElementsByTagName("a");
    for (var i = 0; i < list.length; i++) {
    if (i == num) {
    document.getElementById("content" + i).style.display = "block";
    } else {
    document.getElementById("content" + i).style.display = "none";
    }
    }
    }
    for (var j = 0; j < 4; j++) {
    setTimeout("change(" + j + ")", 1500 * (j + 1))
    }</script>