layui中iframe跳转链接与页面按钮跳转的示例分析-创新互联

这篇文章主要介绍layui中iframe跳转链接与页面按钮跳转的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

10年的拉孜网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整拉孜建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“拉孜网站设计”,“拉孜网站推广”以来，每个客户项目都认真落实执行。

一、导航跳转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跳转链接与页面按钮跳转的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

分享标题：layui中iframe跳转链接与页面按钮跳转的示例分析-创新互联
文章起源：http://shouzuofang.com/article/dsigis.html