您好,登錄后才能下訂單哦!
這篇文章主要介紹layui中iframe跳轉(zhuǎn)鏈接與頁面按鈕跳轉(zhuǎn)的示例分析,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
一、導航跳轉(zhuǎn)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="">發(fā)布商品</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跳轉(zhuǎn)的鏈接就是剛上面添加的src鏈接來的.
二.頁面中的按鈕跳轉(zhuǎn)到其他導航頁面,并高亮顯示
做著做著發(fā)現(xiàn)了另外一個問題,就是在你的頁面中有個按鈕,要跳轉(zhuǎn)到對應(yīng)的模塊,直接跳轉(zhuǎn)到對應(yīng)模塊,你們有沒發(fā)現(xiàn)跳轉(zhuǎn)到的那個模塊,左側(cè)的導航并沒相對應(yīng)的顯示的那個地方高亮,還是默認在原來那個高亮;
按鈕跳轉(zhuǎn)之后,另外頁面的導航?jīng)]有高亮顯示呀.解決辦法還是有的,要通過js去控制跳轉(zhuǎn):
1、首先在按鈕那個頁面html添加:
<a href="goodsAttribute.html" class="layui-btn jump_refresh_url">跳轉(zhuǎn)到商品屬性</a><hr><a href="goodsCategories.html" class="layui-btn jump_refresh_url">跳轉(zhuǎn)到商品分類</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'); } }) }
該辦法實現(xiàn)的效果請記得在服務(wù)器端瀏覽喔,直接瀏覽打開按鈕跳轉(zhuǎn)會報錯的喔,因為iframe之前的操作會存在跨域問題,所以要用localhost等打開,不能直接打開html,比如webstrom都自帶web服務(wù)器的,打開也方便.localhost打開的就行了.
以上是“l(fā)ayui中iframe跳轉(zhuǎn)鏈接與頁面按鈕跳轉(zhuǎn)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。