求解是循环的问题吗-慕课网

首页课程实战体系课手记专栏慕课教程

求解是循环的问题吗

来源：1-5 编程练习

qq_慕斯卡4334448

2016-12-13 14:19

是循环的问题吗··

写回答关注

1回答

串猪神: 2016-12-13 16:33:24

已采纳

不是。是你id的问题，注意到使用了一个for循环为每个p绑定了点击事件，在for循环结束后，每个p标签已经绑定了事件了。但是注意到你的i在内存中的值已经是3了，所以你每次都没有效果，可以在每个节点上绑定一些数据。帮你修改了一个。可以参照一下，测试过了是可以的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠下拉菜单</title>
    <style type="text/css">
 *{
            margin:0;padding: 0;font-size: 20px;list-style: none;text-decoration: none;color: black;
 }
        .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;background: #eee;}
        ul{display: none;}
        .menu li{height: 24px;line-height: 24px;padding-left: 5px;}
    </style>
    <script type="text/javascript">
 window.onload=function(){
            var p=document.getElementById('menu').getElementsByTagName('p');
 var ul=document.getElementById("menu").getElementsByTagName("ul");
 for (var i = 0; i < p.length; i++) {
                p[i].id = i;
 p[i].onclick=function(){
                    for (var j = 0; j < ul.length; j++) {
                        if (j==this.id) {
                            ul[j].style.display='block';
 }
                        else{
                            ul[j].style.display = "none";
 }
                    }
                }
            }
        }
    </script>
</head>
<body>
<div class="menu"  id="menu">
    <div>
        <p>Web前端</p>
        <ul>
            <li><a href="#"> JavaScript</a></li>
            <li>Div+Css</li>
            <li><a href="#">jQuery</a></li>
        </ul>
    </div>
    <div>
        <p>后台脚本</p>
        <ul>
            <li><a href="#">PHP</a></li>
            <li>ASP .net</li>
            <li><a href="#">JSP</a></li>
        </ul>
    </div>
    <div>
        <p>前端框架</p>
        <ul>
            <li><a href="#">Extjs</a></li>
            <li>Esspress</li>
            <li><a href="#">YUI</a></li>
        </ul>
    </div>
</div>
</body>
</html>

在每个节点上绑定了id，这样就可以正确的得到了索引。

5 1

qq_慕斯卡... 回复串猪神

感谢回答与回复！

2016-12-13 17:11:57

共 5 条回复 >

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65465 学习 · 533 问题

查看课程

相似问题

for循环问题