我试过很多的方式都无法进入到点击事件中,请各位指正一下代码中纯在的问题,谢谢!
这是我的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>