layui中iframe跳转链接与页面按钮跳转的示例分析

发布时间:2021-09-23 16:41:40 作者:小新
来源:亿速云 阅读:812

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

一、导航跳转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');            }        })    }

该办法实现的效果请记得在服务器端浏览喔,直接浏览打开按钮跳转会报错的喔,因为iframe之前的操作会存在跨域问题,所以要用localhost等打开,不能直接打开html,比如webstrom都自带web服务器的,打开也方便.localhost打开的就行了.

以上是“layui中iframe跳转链接与页面按钮跳转的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. JS跳转链接,JS跳转页面方法
  2. HTML如何设置页面内链接的跳转

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

layui iframe

上一篇:windows桌面快捷方式图标小箭头消失找回方法是怎样的

下一篇:layui中icon指的是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》