通过点击子列表实现局部页面切换功能

Question

我试过很多的方式都无法进入到点击事件中，请各位指正一下代码中纯在的问题，谢谢！

这是我的JS代码

<script>
    //使用两个for循环判断谁被点击了，被点击了的设置为class on 没有的 设置为 off
    /*getElementsByTagName返回的都是数组，是根据html标签获取的所有标签元素的数组*/
    //监听dl下的a的点击事件，获取被点击的a的id属性值
    var leftMenu=document.getElementById('leftMenu');
    var ul=leftMenu.getElementsByTagName('ul');
    var li=ul.getElementsByTagName('li');
    var iframe;
    for (var i=0;i<=li.length;i++){
        var dl= li[i].getElementsByTagName('dl');
        var a=dl.getElementsByTagName('a');
        console.log(a.length);
        for (var k=0;k<=a.length;k++){
            a[k].onclick(function () {
                alert("change");
                var name= a[k].id ;
                iframe=$('#forth').document.getElementById(name+"1");
                iframe.className='on';
                iframe.nextElementSibling.className='off' ;
            });
        }
    }

    /*$('#first').onclick= function () {
        console.log('access')
      $('#first')
      var a=document.getElementById($('this'));
      //如果使用block显示的话会使右面的元素换行显示所以要谨慎，所以这里使用display为空会比较好
       var b=a.nodeName;
      $('#third>#forth>#b').style.display="";
         $('#third>#forth>#b').sibling.style.display="none";
     }*/

</script>

这是我的列表的实现代码（引用了layui中的框架）

<div class="layui-side layui-bg-black"  id="leftMenu">
        <div class="layui-side-scroll" >
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed"  >
                    <a  id="first"  href="javascript: "; >
                        <i class="layui-icon layui-icon-gift"></i>
                        <cite>商品管理</cite>
                    </a>
                    <dl class="layui-nav-child" >
                        <!--href="javascript:; 作用是防止跳转到别的页面-->

                        <dd data-name="button">
                            <a name="addGoods" href="/pages/back/goods/addPre" target="addGoods" id="addGoods">添加商品</a>
                        </dd>

                        <dd data-name="button">
                            <a >商品列表 </a>
                        </dd>

                        <dd><a href="javascript:;">menu 3</a></dd>

                        <dd><a href="">the links</a></dd>

                    </dl>
                </li>

                <li class="layui-nav-item">
                    <a href="javascript:;">商品类型</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a name="addType" href="/pages/back/type/addGoodsType" target="addType" id="addType">类型添加</a>
                        </dd>
                        <dd><a href="javascript:;">类型列表</a></dd>
                        <dd><a href="javascript:;">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">下拉备胎3号</a></li>
                <li class="layui-nav-item"><a href="">下拉备胎4号</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body" >
        <!-- 内容主体区域 -->
        <div style="padding: 15px; height: 100%" id="forth">
            <iframe id="addGoods1"  name="addGoods" width="100%" height="100%" scrolling="no" frameborder="0"  class="on" ></iframe>
            <iframe id="addType1"  name="addType" width="100%" height="100%" scrolling="no" frameborder="0"  class="off"></iframe>
        </div>

    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>

这是实现局部页面更换的代码

 <div class="layui-body" >
        <!-- 内容主体区域 -->
        <div style="padding: 15px; height: 100%" id="forth">
            <iframe id="addGoods1"  name="addGoods" width="100%" height="100%" scrolling="no" frameborder="0"  class="on" ></iframe>
            <iframe id="addType1"  name="addType" width="100%" height="100%" scrolling="no" frameborder="0"  class="off"></iframe>
        </div>

    </div>

Answer 1

逻辑太复杂了，我给你个提示吧，两个问题：
1、你的js代码需要放到html下边去，因为按加载顺序，加载js的时候dom元素还没渲染，是访问不到的
2、getElementsByTagName获取到的是一个列表，要从里边取一个元素然后去获取子元素
下边的是我简单改了一点，还需要继续改，循环太多了，你慢慢改吧

<script>
        var leftMenu = document.getElementById('leftMenu');
        var ul = leftMenu.getElementsByTagName('ul');
        var li = ul[0].getElementsByTagName('li');
        var iframe;
        for (var i = 0; i <= li.length; i++) {
            var dl = li[i].getElementsByTagName('dl');
            var a = dl[0].getElementsByTagName('a');
            for (var k = 0; k <= a.length; k++) {
                a[0].onclick = function() {
                    alert("change");
                    var name = a[k].id;
                    iframe = $('#forth').document.getElementById(name + "1");
                    iframe.className = 'on';
                    iframe.nextElementSibling.className = 'off';
                }
            }
        }

    </script>

如有帮助，请采纳！