LayUI的iframe跳转链接和页面按钮跳转相关
一、导航跳转iframe页面问题:
关于layui的iframe嵌套页面的导航跳转页面问题,如下图所示可以看到效果:
在模板页的导航代码:
<ul 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="https://www.swvq.com/layui/goodsList.html" target="main_self_frame">商品列表</a></dd>
<dd><a href="https://www.swvq.com/layui/goodsAttribute.html" target="main_self_frame">商品属性</a></dd>
<dd><a href="https://www.swvq.com/layui/goodsCategories.html" target="main_self_frame">商品分类</a></dd>
<dd><a href="https://www.swvq.com/layui/436400.html">添加</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="https://www.swvq.com/layui/436400.html">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="https://www.swvq.com/layui/436400.html">云市场</a></li>
<li class="layui-nav-item"><a href="https://www.swvq.com/layui/436400.html">发布商品</a></li>
</ul>
有没看到链接那里多了这个东西:
target="main_self_frame"
然后在嵌套的iframe代码中加:
<iframe src="https://www.swvq.com/layui/goodsList.html" name="main_self_frame" frameborder="0" class="layadmin-iframe"></iframe>
就是加上这个:name="main_self_frame" ;然后src跳转的链接就是刚上面添加的src链接来的.
二.页面中的按钮跳转到其他导航页面,并高亮显示
做着做着发现了另外一个问题,就是在你的页面中有个按钮,要跳转到对应的模块,直接跳转到对应模块,你们有没发现跳转到的那个模块,左侧的导航并没相对应的显示的那个地方高亮,还是默认在原来那个高亮;
效果显示:
按钮跳转之后,另外页面的导航没有高亮显示呀.解决办法还是有的,要通过js去控制跳转:
1、首先在按钮那个页面html添加:
<a href="https://www.swvq.com/layui/goodsAttribute.html" class="layui-btn jump_refresh_url">跳转到商品属性</a>
<hr>
<a href="https://www.swvq.com/layui/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');
}
})
}
照上面步骤就能实现效果了,请看下图效果:
该办法实现的效果请记得在服务器端浏览喔,直接浏览打开按钮跳转会报错的喔,因为iframe之前的操作会存在跨域问题,所以要用localhost等打开,不能直接打开html,比如webstrom都自带web服务器的,打开也方便.localhost打开的就行了.
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfhkfa
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01