hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

【WEB前端开辟】layui的iframe跳转链接与页面按钮跳转相干引见

2019-11-24后端开发ki4网21°c
A+ A-

一、导航跳转iframe页面题目:

引荐:layui教程

关于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');
            }
        })
    }

照上面步骤就可以完成结果了,请看下图结果:

该方法完成的结果请记得在服务器端阅读喔,直接阅读翻开按钮跳转会报错的喔,由于iframe之前的操纵会存在跨域题目,所以要用localhost等翻开,不能直接翻开html,比方webstrom都自带web服务器的,翻开也轻易.localhost翻开的就好了.

以上就是layui的iframe跳转链接与页面按钮跳转相干引见的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
【WEB前端开辟】layui的iframe跳转链接与页面按钮跳转相干引见

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>