layui中的页面问题

这篇文章将为大家详细讲解有关layui中的页面问题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、网站制作、普兰店网络推广、微信小程序、普兰店网络营销、普兰店企业策划、普兰店品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供普兰店建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

一、页面中的按钮跳转到其他导航页面,并高亮显示

做着做着发现了另外一个问题,就是在你的页面中有个按钮,要跳转到对应的模块,直接跳转到对应模块,你们有没发现跳转到的那个模块,左侧的导航并没相对应的显示的那个地方高亮,还是默认在原来那个高亮;

效果显示:

按钮跳转之后,另外页面的导航没有高亮显示呀.解决办法还是有的,要通过js去控制跳转:

1、首先在按钮那个页面html添加:

跳转到商品属性

跳转到商品分类

链接上面加这个类: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打开的就行了.

二、导航跳转iframe页面问题:

关于layui的iframe嵌套页面的导航跳转页面问题,如下图所示可以看到效果:

在模板页的导航代码:

    

        所有商品
        

            
商品列表
            
商品属性
            
商品分类
            
添加
        
    
    

        解决方案
        

            
列表一
            
列表二
            
超链接
        
    
    
云市场
    
发布商品

有没看到链接那里多了这个东西:

target="main_self_frame"

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

就是加上这个:name="main_self_frame" ;然后src跳转的链接就是刚上面添加的src链接来的.

扩展：

layui是面向于后端开发者的模块，在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块！ layui 认为这种轻量的组织方式，仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的 HTML/CSS/JavaScript本身。

关于layui中的页面问题就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。