這篇文章將為大家詳細(xì)講解有關(guān)layui中的頁(yè)面問題，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、網(wǎng)站制作、普蘭店網(wǎng)絡(luò)推廣、微信小程序、普蘭店網(wǎng)絡(luò)營(yíng)銷、普蘭店企業(yè)策劃、普蘭店品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供普蘭店建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

一、頁(yè)面中的按鈕跳轉(zhuǎn)到其他導(dǎo)航頁(yè)面,并高亮顯示

做著做著發(fā)現(xiàn)了另外一個(gè)問題,就是在你的頁(yè)面中有個(gè)按鈕,要跳轉(zhuǎn)到對(duì)應(yīng)的模塊,直接跳轉(zhuǎn)到對(duì)應(yīng)模塊,你們有沒發(fā)現(xiàn)跳轉(zhuǎn)到的那個(gè)模塊,左側(cè)的導(dǎo)航并沒相對(duì)應(yīng)的顯示的那個(gè)地方高亮,還是默認(rèn)在原來那個(gè)高亮;

效果顯示:

按鈕跳轉(zhuǎn)之后,另外頁(yè)面的導(dǎo)航?jīng)]有高亮顯示呀.解決辦法還是有的,要通過js去控制跳轉(zhuǎn):

1、首先在按鈕那個(gè)頁(yè)面html添加:

跳轉(zhuǎn)到商品屬性

跳轉(zhuǎn)到商品分類

鏈接上面加這個(gè)類:jump_refresh_url ;然后在該頁(yè)面js那里加上:

$(".jump_refresh_url").click(function () {
     var url = $(this).attr('href');
      top.refreshHighlight(url);
 });

2、在導(dǎo)航所在的模板頁(yè)面添加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');
            }
        })
    }

照上面步驟就能實(shí)現(xiàn)效果了,請(qǐng)看下圖效果:

該辦法實(shí)現(xiàn)的效果請(qǐng)記得在服務(wù)器端瀏覽喔,直接瀏覽打開按鈕跳轉(zhuǎn)會(huì)報(bào)錯(cuò)的喔,因?yàn)閕frame之前的操作會(huì)存在跨域問題,所以要用localhost等打開，不能直接打開html,比如webstrom都自帶web服務(wù)器的,打開也方便.localhost打開的就行了.

二、導(dǎo)航跳轉(zhuǎn)iframe頁(yè)面問題:

關(guān)于layui的iframe嵌套頁(yè)面的導(dǎo)航跳轉(zhuǎn)頁(yè)面問題,如下圖所示可以看到效果:

在模板頁(yè)的導(dǎo)航代碼:

    

        所有商品
        

            
商品列表
            
商品屬性
            
商品分類
            
添加
        
    
    

        解決方案
        

            
列表一
            
列表二
            
超鏈接
        
    
    
云市場(chǎng)
    
發(fā)布商品

有沒看到鏈接那里多了這個(gè)東西:

target="main_self_frame"

然后在嵌套的iframe代碼中加:

就是加上這個(gè):name="main_self_frame" ;然后src跳轉(zhuǎn)的鏈接就是剛上面添加的src鏈接來的.

擴(kuò)展：

layui是面向于后端開發(fā)者的模塊，在組織形式上毅然采用了幾年前的以瀏覽器為宿主的類 AMD 模塊管理方式，卻又并非受限于 CommonJS 的那些條條框框，它擁有自己的模式，更加輕量和簡(jiǎn)單。layui 定義為“經(jīng)典模塊化”，并非是刻意強(qiáng)調(diào)“模塊”理念本身，而是有意避開當(dāng)下 JS 社區(qū)的主流方案，試圖以盡可能簡(jiǎn)單的方式去詮釋高效！它的所謂經(jīng)典，是在于對(duì)返璞歸真的執(zhí)念，它以當(dāng)前瀏覽器普通認(rèn)可的方式去組織模塊！ layui 認(rèn)為這種輕量的組織方式，仍然可以填補(bǔ) WebPack 以外的許多場(chǎng)景。所以它堅(jiān)持采用經(jīng)典模塊化，也正是能讓人避開工具的復(fù)雜配置，重新回歸到原生態(tài)的 HTML/CSS/JavaScript本身。

關(guān)于layui中的頁(yè)面問題就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。