layui的iframe跳轉連結與頁面按鈕跳轉相關介紹-Layui教程-PHP中文網

layui的iframe跳轉連結與頁面按鈕跳轉相關介紹

尚

發布： 2019-11-23 16:51:27

轉載

9164 人瀏覽過

layui的iframe跳轉連結與頁面按鈕跳轉相關介紹

一、導覽跳轉iframe頁面問題:

建議：layui教學

關於layui的iframe嵌套頁面的導航跳轉頁面問題,如下圖所示可以看到效果:

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連結來的.

二.頁面中的按鈕跳到其他導航頁面,並高亮顯示

做著做著發現了另外一個問題,就是在你的頁面中有個按鈕,要跳到對應的模組,直接跳到對應模組,你們有沒發現跳到的那個模組,左側的導航並沒相對應的顯示的那個地方高亮,還是預設在原來那個高亮;

效果顯示:

layui的iframe跳轉連結與頁面按鈕跳轉相關介紹

#按鈕跳轉之後,另外頁面的導航沒有高亮顯示呀.解決辦法還是有的,要透過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(&#39;href&#39;);
      top.refreshHighlight(url);
 });

登入後複製

2、在導航所在的範本頁面新增js:

function refreshHighlight(url) {
        $ = layui.jquery;
        $(".layui-nav[lay-filter=&#39;navList&#39;] a").each(function (ind, val) {
            if($(this).attr(&#39;href&#39;) === url){
                $(&#39;.layui-nav dd&#39;).removeClass(&#39;layui-this&#39;);
                $(this).parent(&#39;dd&#39;).addClass(&#39;layui-this&#39;);
            }
        })
    }

登入後複製

照上面步驟就能實現效果了,請看下圖效果:

layui的iframe跳轉連結與頁面按鈕跳轉相關介紹