layui的iframe跳转链接,页面按钮跳转
看到社区挺多人问过这个问题,而自己做的时候也遇到过,就总结一下.关于layui的iframe嵌套页面的导航跳转页面问题,如下图所示可以看到效果:
具体是怎么实现的呢?请仔细听,下面我为大家一一道来;
在模板页的导航代码:
<ul class="layui-nav layui-nav-tree" lay-filter="navList"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">所有商品</a> <dl class="layui-nav-child"> <dd class="layui-this"><a href="goodsList.html" target="main_self_frame">商品列表</a></dd> <dd><a href="goodsAttribute.html" target="main_self_frame">商品属性</a></dd> <dd><a href="goodsCategories.html" target="main_self_frame">商品分类</a></dd> <dd><a href="">添加</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">列表一</a></dd> <dd><a href="javascript:;">列表二</a></dd> <dd><a href="">超链接</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">云市场</a></li> <li class="layui-nav-item"><a href="">发布商品</a></li> </ul
有没看到链接那里多了这个东西:
target="main_self_frame"
对,就是在导航加这个;然后在嵌套的iframe代码中加:
<iframe src="goodsList.html" name="main_self_frame" frameborder="0" class="layadmin-iframe"></iframe>
看到没,就是加上这个:name="main_self_frame" ;然后src跳转的链接就是刚上面添加的src链接来的.是不是很简单呀.
//------------------------------------------------------------按钮跳转页面问题----
后面做着做着发现了另外一个问题,就是在你的页面中有个按钮,要跳转到对应的模块,直接跳转到对应模块,你们有没发现跳转到的那个模块,左侧的导航并没相对应的显示的那个地方高亮,还是默认在原来那个高亮;
效果显示:
有没发现上图中效果,按钮跳转之后,另外页面的导航没有高亮显示呀.解决办法还是有的,要通过js去控制跳转:
1.首先在按钮那个页面html添加:
<a href="goodsAttribute.html" class="layui-btn jump_refresh_url">跳转到商品属性</a> <hr> <a href="goodsCategories.html" class="layui-btn jump_refresh_url">跳转到商品分类</a>
链接上面加这个类:jump_refresh_url ;然后在该页面js那里加上:
$(".jump_refresh_url").click(function () {
var url = $(this).attr('href');
top.refreshHighlight(url);
});2.在导航所在的模板页面添加js:
function refreshHighlight(url) {
$ = layui.jquery;
$(".layui-nav[lay-filter='navList'] a").each(function (ind, val) {
if($(this).attr('href') === url){
$('.layui-nav dd').removeClass('layui-this');
$(this).parent('dd').addClass('layui-this');
}
})
}照上面步骤就能实现效果了,请看下图效果:
是不是已经实现了呀,看完之后还是不会的童鞋可以下载代码查看.
http://www.jianbaizhan.com/article/612
!!!!!!!!!!注意:该办法实现的效果请记得在服务器端浏览喔,比如webstrom都自带web服务器的,打开也方便.localhost打开的就行了.直接本来浏览打开按钮跳转会报错的喔,iframe之前的操作会存在跨域问题,所以要用localhost等打开，不能直接打开html.
本文作者： Jasmine
本文链接： https://www.jianbaizhan.com/article/612
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！