php 点击菜单栏只刷新局部,layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法...

其实这篇文章是给自己看的，以后忘记怎么做回来还能看一下

点击左侧菜单栏只刷新局部，局部就用iframe。

首先先建layout页，建左侧菜单栏，然后下面的@RenderBody()

名片审核
项目审核
需求审核

@RenderBody()

@RenderSection("scripts", required: false)

然后在最后写上js用于点击跳转，上面的@RenderSection("scripts", required: false)和下面的#demoAdmin都在另一个页面中，也就是放iframe的页面

//JavaScript代码区域

layui.use('element', function () {

var $ = layui.jquery

, element = layui.element;

});

$(".Card").click(function () {

$("#demoAdmin").attr("src", "/Admin/CardManagement")

});

$(".Project").click(function () {

$("#demoAdmin").attr("src", "/Admin/ProjectManagement")

});

$(".Funds").click(function () {

$("#demoAdmin").attr("src", "/Admin/FundsManagement")

});

新建HomeController,新建Index页面

Layout = null;

Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";

}

@section scripts{

reHeight();

$(window).resize(function () {

reHeight();

});

//设置iframe高度

function reHeight() {

var bodyHeight = $(window).height();

bodyHeight = bodyHeight - 107;

if (bodyHeight<400) {

bodyHeight = 400;

}

$("#demoAdmin").height(bodyHeight);

}

引用一下上面的layout。

其他页面引用Layout = "~/Areas/Admin/Views/Shared/_LayoutPage.cshtml";

我把css和js引用都放在了另一个layout里，所以我需要引用一下，否则页面会乱。

以上这篇layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

php 点击菜单栏只刷新局部,layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法...相关推荐

点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...
layui模块显示收缩_修改layui的后台模板的左侧导航栏可以伸缩的方法
原生的左侧导航栏代码: 所有商品列表一列表二列表三超链接解决方案列表一列表二超链接云市场发布商品自己修改的: 生源追踪生源列表学校信息工做计划学员管理学员列表考勤管理 ...
后台管理页面通过点击左侧导航栏的菜单项实现右边内容的改变
目录前端页面部分 js代码部分左侧导航栏组菜单项的打开与关闭 url地址跳转地址栏url地址处理 ajax实现右边页面内容变换内容面板上Bootstrap 面包屑导航前端页面部分 <a ...
android 隐藏导航栏recent键,Android 去掉导航栏的HOME和RECENT_APP，只保留BACK
1.修改以下三个文件中home和recent_app的visibility属性为gone: frameworks/base/packages/SystemUI/res/layout-ldrtl/nav ...
bootstrap4 左侧导航栏优秀大气_Axure导出html没有左侧菜单栏（导航栏）？——Mac Safari...
先确认你要找的是不是以下这个菜单如果是,可以继续了. 如果你用的是Mac,打开系统默认浏览器Safari,打开Safari偏好设置选择高级,勾选下方的"在菜单栏中显示"开发&q ...
html左侧导航栏点击下拉菜单,HTML+CSS实现下拉菜单
HTML+CSS实现简单下拉菜单 HTML+CSS实现简单的下拉列表 1.下拉列表实例代码如下: *{ margin:0; padding:0; text-decoration:none; list ...
html左侧导航栏椭圆风格,HTML5 果冻风格的导航菜单栏
CSS 语言: CSSSCSS 确定 body { background: #423852; overflow: hidden; } .container { position: absolute; ...
vue 导航栏刷新页面定位:
不想分析可以直接看解决方案问题描述: 通过router的route-link可以实现导航栏的功能,并且可以跳转到相应页面但是刷新页面导航栏没有定位到当前页面一栏. 问题分析: 定位导航栏步骤 1. ...
菜鸟教程html左侧菜单栏,CSS 导航栏
CSS 导航栏导航栏熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接列表作为标准的HTML基础一个导航栏是必须的 .在我们的例 ...
html 设置页面刷新,HTML 页面自动刷新
学习就是一个不断积累的过程,每一天能够学到一点新东西说明自己就在进步!! HTML head 里面设置页面自动刷新功能兼容Ie 页面2s自动刷新一次代码: Document Hello world ...

php 点击菜单栏只刷新局部,layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法...

php 点击菜单栏只刷新局部,layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法...相关推荐

最新文章

热门文章