一、导航跳转iframe页面题目:
引荐:layui教程
关于layui的iframe嵌套页面的导航跳转页面题目,如下图所示能够看到结果:
在模板页的导航代码:
一切商品
商品列表商品属性商品分类增加
解决方案
列表一列表二超链接云市场宣布商品
有没看到链接那边多了这个东西:
target="main_self_frame"
然后在嵌套的iframe代码中加:
就是加上这个:name=”main_self_frame” ;然后src跳转的链接就是刚上面增加的src链接来的.
二.页面中的按钮跳转到其他导航页面,并高亮显现
做着做着发明了别的一个题目,就是在你的页面中有个按钮,要跳转到对应的模块,直接跳转到对应模块,你们有没发明跳转到的谁人模块,左边的导航并没相对应的显现的谁人地方高亮,照样默许在本来谁人高亮;
结果显现:
按钮跳转以后,别的页面的导航没有高亮显现呀.解决方法照样有的,要经由过程js去掌握跳转:
1、首先在按钮谁人页面html增加:
跳转到商品属性
跳转到商品分类
链接上面加这个类: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');
}
})
}
照上面步骤就可以完成结果了,请看下图结果:
该方法完成的结果请记得在服务器端阅读喔,直接阅读翻开按钮跳转会报错的喔,由于iframe之前的操纵会存在跨域题目,所以要用localhost等翻开,不能直接翻开html,比方webstrom都自带web服务器的,翻开也轻易.localhost翻开的就好了.
以上就是layui的iframe跳转链接与页面按钮跳转相干引见的细致内容,更多请关注ki4网别的相干文章!