這篇文章將為大家詳細講解有關(guān)layui中的頁面問題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一、頁面中的按鈕跳轉(zhuǎn)到其他導(dǎo)航頁面,并高亮顯示
做著做著發(fā)現(xiàn)了另外一個問題,就是在你的頁面中有個按鈕,要跳轉(zhuǎn)到對應(yīng)的模塊,直接跳轉(zhuǎn)到對應(yīng)模塊,你們有沒發(fā)現(xiàn)跳轉(zhuǎn)到的那個模塊,左側(cè)的導(dǎo)航并沒相對應(yīng)的顯示的那個地方高亮,還是默認在原來那個高亮;
效果顯示:
按鈕跳轉(zhuǎn)之后,另外頁面的導(dǎo)航?jīng)]有高亮顯示呀.解決辦法還是有的,要通過js去控制跳轉(zhuǎn):
1、首先在按鈕那個頁面html添加:
跳轉(zhuǎn)到商品屬性
跳轉(zhuǎn)到商品分類
鏈接上面加這個類:jump_refresh_url ;然后在該頁面js那里加上:
重慶分公司
重慶分公司
$(".jump_refresh_url").click(function () {
var url = $(this).attr('href');
top.refreshHighlight(url);
});2、在導(dǎo)航所在的模板頁面添加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)效果了,請看下圖效果:
該辦法實現(xiàn)的效果請記得在服務(wù)器端瀏覽喔,直接瀏覽打開按鈕跳轉(zhuǎn)會報錯的喔,因為iframe之前的操作會存在跨域問題,所以要用localhost等打開，不能直接打開html,比如webstrom都自帶web服務(wù)器的,打開也方便.localhost打開的就行了.
二、導(dǎo)航跳轉(zhuǎn)iframe頁面問題:
關(guān)于layui的iframe嵌套頁面的導(dǎo)航跳轉(zhuǎn)頁面問題,如下圖所示可以看到效果:
在模板頁的導(dǎo)航代碼:
有沒看到鏈接那里多了這個東西:
target="main_self_frame"
然后在嵌套的iframe代碼中加:
就是加上這個:name="main_self_frame" ;然后src跳轉(zhuǎn)的鏈接就是剛上面添加的src鏈接來的.
擴展：
layui是面向于后端開發(fā)者的模塊，在組織形式上毅然采用了幾年前的以瀏覽器為宿主的類 AMD 模塊管理方式，卻又并非受限于 CommonJS 的那些條條框框，它擁有自己的模式，更加輕量和簡單。layui 定義為“經(jīng)典模塊化”，并非是刻意強調(diào)“模塊”理念本身，而是有意避開當(dāng)下 JS 社區(qū)的主流方案，試圖以盡可能簡單的方式去詮釋高效！它的所謂經(jīng)典，是在于對返璞歸真的執(zhí)念，它以當(dāng)前瀏覽器普通認可的方式去組織模塊！ layui 認為這種輕量的組織方式，仍然可以填補 WebPack 以外的許多場景。所以它堅持采用經(jīng)典模塊化，也正是能讓人避開工具的復(fù)雜配置，重新回歸到原生態(tài)的 HTML/CSS/JavaScript本身。
關(guān)于layui中的頁面問題就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
