layui目录随着导航栏点击定位

最新推荐文章于 2022-07-25 22:03:27 发布
最新推荐文章于 2022-07-25 22:03:27 发布
阅读量1.7k 收藏 3
点赞数 1
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/long_24k_os/article/details/103031282
版权

layui目录随着导航栏点击定位

image

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui目录随着导航栏点击定位</title>
    <link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/layui.js"></script>
    <style type="text/css">
		.layui-col-md1 .layui-nav.layui-nav-tree { /*导航栏*/
			background: #eee;
			width: 104px;
			position: fixed;
			margin-top: 5%;
			border-radius: 26px;
		}

		.layui-col-md1 .layui-nav.layui-nav-tree a { /*导航栏 字体*/
			color: black;
		}

		#goTop { /*置顶*/
			position: fixed;
			font-size: 44px;
			right: 50px;
			bottom: 72px;
		}
    </style>
</head>

<body style="width:80%">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12 layui-col-md-offset1">
                <div class="layui-col-md1">
                    <div class="layui-card">
                        <ul class="layui-nav layui-nav-tree" lay-filter="directoryNavFilter">
                            <li class="layui-nav-item"><a href="javascript:void(0);">基本信息</a></li>
                            <li class="layui-nav-item"><a href="javascript:void(0);">求职意向</a></li>
                            <li class="layui-nav-item"><a href="javascript:void(0);">工作经历</a></li>
                            <li class="layui-nav-item"><a href="javascript:void(0);">项目经验</a></li>
                            <li class="layui-nav-item"><a href="javascript:void(0);">教育经历</a></li>
                            <li class="layui-nav-item"><a href="javascript:void(0);">在校情况</a></li>
                            <li class="layui-nav-item"><a href="javascript:void(0);">技能特长</a></li>
                            <li class="layui-nav-item"><a href="javascript:void(0);">作品/附件</a></li>
                            <li class="layui-nav-item"><a href="javascript:void(0);">自我评价</a></li>
                        </ul>
                    </div>
                </div>
                <div class="layui-col-md8 layui-col-md-offset1">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md10 layui-col-md-offset1" id="basicInformation_container">
                                    <div class="layui-card-header">
                                        <h4><b>基本信息</b></h4>
                                    </div>
                                    <div>
                                        <pre>
					1
					2
					3
					4
					5
					6
					7
										</pre>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md10 layui-col-md-offset1">
                                    <div class="layui-card-header">
                                        <h4><b>求职意向</b></h4>
                                    </div>
                                    <div>
                                       <pre>
					1
					2
					3
					4
					5
					6
					7
										</pre>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md10 layui-col-md-offset1">
                                    <div class="layui-card-header">
                                        <h4><b>工作经历</b></h4>
                                    </div>
                                    <div>
                                       <pre>
					1
					2
					3
					4
					5
					6
					7
										</pre>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md10 layui-col-md-offset1">
                                    <div class="layui-card-header">
                                        <h4><b>项目经验</b></h4>
                                    </div>
                                     <div>
                                        <pre>
					1
					2
					3
					4
					5
					6
					7
										</pre>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md10 layui-col-md-offset1">
                                    <div class="layui-card-header">
                                        <h4><b>教育经历</b></h4>
                                    </div>
                                     <div>
                                        <pre>
					1
					2
					3
					4
					5
					6
					7
										</pre>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md10 layui-col-md-offset1">
                                    <div class="layui-card-header">
                                        <h4><b>在校情况</b></h4>
                                    </div>
                                     <div>
                                       <pre>
					1
					2
					3
					4
					5
					6
					7
										</pre>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md10 layui-col-md-offset1">
                                    <div class="layui-card-header">
                                        <h4><b>技能特长</b></h4>
                                    </div>
                                     <div>
                                       <pre>
					1
					2
					3
					4
					5
					6
					7
										</pre>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md10 layui-col-md-offset1">
                                    <div class="layui-card-header">
                                        <h4><b>作品/附件</b></h4>
                                    </div>
                                    <div>
                                       <pre>
					1
					2
					3
					4
					5
					6
					7
										</pre>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md10 layui-col-md-offset1">
                                    <div class="layui-card-header">
                                        <h4><b>自我评价</b></h4>
                                    </div>
                                    <div>
                                       <pre>
					1
					2
					3
					4
					5
					6
					7
										</pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#top" class="layui-icon layui-icon-top" id="goTop"></a>
            </div>
        </div>
    </div>
    <script>
	   layui.use(['element', 'layer'], function () {// 左侧导航栏
	        let element = layui.element;
	        let layer = layui.layer;
	        element.on('nav(directoryNavFilter)', function(elem){
	            // layer.msg(elem.text());
	            let h4Title = $(document).find("div .layui-col-md10");
	            h4Title.map((k,v) => {
	                // console.log($(v).find('h4 b').html() + " - " + elem.text());
	                if($(v).find('h4 b').html()===elem.text()) {
	                    window.scrollTo(0, $("body,html").animate({scrollTop:$(v).offset().top-20}, 500));
	                    layer.msg($(v).find('h4 b').html() + " - " + elem.text());
	                }
	            });
	        });
	    });
    </script>
</body>

</html>
八宝粥大朋友
关注
专栏目录
Layui实现点击左侧导航栏菜单，在右侧内容生成对应的目录页，可右键删除所有页
程序羊的博客
03-19 1905
在layui的后台管理页面上，通过jquery实现点击导航栏，呈现浏览器新打开页面的效果，并支持右键删除所有。详情请往下看。
layui中导航元素的简单使用
ToBeXX的博客
09-26 8257
整体效果图 所需界面 main.html界面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理</title> <link rel="stylesheet" href="layui/css/...
layui 侧边导航栏动态展示后台返回的目录、多层目录
action2019的博客
12-28 925
废话不多说，直接上代码 window.leftMenu = ‘’ var res = 接口返回的那些屌毛数据 window.leftMenu += ’ ’ if (res.content.length > 0) { for (var i = 0; i < res.content.length; i++) { //循环后台拿到的数据 window.leftMenu += “” window.leftMenu += “” + res.content[i].name + “” window
layuimini框架中点击顶部导航栏跳转到指定模块首页
m0_61236764的博客
07-25 3647
在参与的一个后台项目开发中使用到了layuimini后台模板框架，其中有三个后台模块，现在需要实现的功能是点击顶部导航栏就会跳转到对应模块的首页。作为一名小白，研究这个问题需要想到的是点击左侧页面菜单栏能进行定向跳转，是如何实现的，在导航栏进行复用就行。于是需要改动layuimini的miniMenu.js,添加以下代码以实现功能。在左侧菜单栏中是存在layuimini-href，这大概是跳转的问题所在。...
基于Layui用JQ实现锚点定位/电梯导航(附带效果GIF)
分享、进步、收获！！！
08-18 1347
今天要给页面用JQ实现一个锚点定位，就是经常听到的电梯导航，京东和淘宝的主页都有这样的应用，一般是用于页面太长，方便用户定位到需要的位置，就是放的锚点。 下面看看HTML内容： //这个是导航栏 <div class="side-nav"> <span class="active">选择评分机</span> //默认选择的位置 <span>本机IP设置</span> <span>平..
143 LayUI
wang_luwei的博客
09-11 255
143 LayUI 一、引言 1.1介绍 官网: https://www.layui.com/ 在官网首页，可以很方便的下载ayUI LayUl是一款经典模块化前端UI框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 使得前端页面的制作变得更加简单。 二、环境搭建 2.1下载 在官网即可完成下载 2.2导入依赖 下载的LayUI解压后，将其中的layui目录导入项目中 三、页面元素 3.1布局 响应式栅格布局，每行分12等分 <%@ page
layui 入门笔记
Liu_wen_wen的博客
06-28 1385
layui入门 layui.css下载 layui.js下载
layui实现2级菜单页面跳转_使用layui实现的左侧菜单栏以及动态操作tab项方法
weixin_39907596的博客
12-19 1603
首先说一下左侧菜单栏这是一个最基本的左侧菜单栏，实现的过程很简单，官方的说明文档就有，但是我在导入layer.js之后，直接复制这段官方代码到我的编辑器上时，发现页面是这样的：发现，绑定属性的菜单并没有下拉选项，这个问题在我导入layer.all.js之后解决了，而且发现如果是在页面的最上方导入的话也没有下拉选项，只有在html代码下面导入，才可以显示 ，不知道是什么原因。下面说重点，动态操作ta...
layui表格 列自动适应大小失效的解决方法
10-16
在开发Web应用时，使用layui框架创建表格是一种常见的选择，因为layui提供了丰富的UI组件和便捷的API。然而，在实际操作中，我们可能会遇到表格列自动适应大小失效的问题，这会严重影响用户体验。本篇文章将深入探讨...
layui表头跟随滚动条滑动_侧边栏实现随滚动条滑动固定的效果
weixin_35219046的博客
12-23 1511
最近在一些博客看到侧边栏某些板块，随着滚动条的滑动，而跟着滑动或者固定的效果，感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的)，还有适合于广告联盟的展示。所以去网上找了一些资料，整理了一下，现在分享给大家，也方便以后自己查阅，希望对大家有用。效果一：...
layui导航.rar
08-06
针对layui页面导航逻辑：头部导航点击左侧显示下一级导航，左侧具有收缩功能，收缩后弹出类似adminlte插件的效果，导航链接可对内容区加载相应页面 -针对layui框架做出的更改， -引入navbar.js和tab.js两个js插件， -并进行方法的新增和修改 -针对admin.css直接做的调整， -连接方法layui的jq实现 注：需要在环境下运行
layui的基本使用(布局，栅格，按钮)
serendipity_xr的博客
08-24 6586
layui 一.layui概述 官网：https://www.layui.com/ 官方文档：https://www.layui.com/doc/ 1.layui下载 在浏览器中输入https://www.layui.com/会出现以下界面 点击立即下载进行下载 下载后并进行解压 2.layui目录结构 二.layui基本使用 1.引入核心文件 <head> <meta charset="UTF-8"> <title>layui的使用</t
第1课：初识layui
李书明(石家庄)的专栏
10-13 594
目录 网站的前台和后台 layui的官方网站 layui框架核心部分的目录结构 thinkphp5中使用layui 网站的前台和后台 完整的网站系统一般分为前台和后台。前台是指匿名用户可以访问的内容，后台是指管理员能操作的部分。前台和后台的界面设计风格不一样。前台界面要求美观，能吸引大众的眼球。后台界面要求很一般，很注意实用性，不讲究花哨。 网上提供了很多后台ui框架，能够节省程序员...
UI自动化中如何去定位一闪而过的提示框
weixin_43551957的博客
09-08 1421
常见的有登录失败时，页面会弹出一个用户不存在或用户密码错误的提示框而，提示框可能存在3秒，经常导致定位不到，使用以下方法轻松解决： 1，F12打开web控制台，输入错误的用户名或密码，点击登录如图所示： 这时无法定位到，弹出的提示框就会消失； 通过 快捷键 “ctrl+”,可以暂停；如图 暂停后回到控制台Elements页面，即可定位到； ...
LayuiMini从后台动态获取目录
Create_Time_NET的博客
12-17 902
layuimini动态获取目录接口
layUI简单学习
Dream的博客
08-29 1340
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 下载地址 : https://www.layui.com/ 目录结构 ├─css //css目录 │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├─laydate ...
Layui自定义模块基础学习
jialijuan521_zhang的博客
06-21 1万+
新手刚刚接触layui，在自定义自己的layui模块的时候废了半天劲，最终终于定义了一个模块成功了，特此做此记录 步骤如下： 第一步：新建一个js文件，目录自选(该实例实在项目的根目录下新建一个MyDefinationLayUiModal,js文件在该目录下），采用layui.define方法 layui.define(function(e){ //提示：该模块也可以依赖其他模块，如：la
Layui简单使用总结
热门推荐
Neely同学的博客
05-27 3万+
Layui使用总结 Layui是什么？ layer，一个可以让你想到即可做到的web弹窗（层）解决方案（js组件），作者贤心。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现。—–来自百度百科 根据layer组件使用人数，就可以看出layui框架是非常不错的...
JFinal Web开发学习(九)首页layui重新构建目录以及首页
珍惜时间
11-08 2705
效果： 刚看了下layui的文档才逐渐对其了解，之前的目录是一片混乱。 当前的目录结构： layui是layui的目录，js/modules是自己的js路径. 1.前台html 根目录下的index.html html> head> meta charset="utf-8"> title>首页title> meta name="renderer" conten
layui侧边导航栏自动定位
最新发布
05-12
可以通过监听滚动事件，获取当前滚动的位置，然后根据当前位置计算出应该高亮显示的导航栏项。 具体实现方法如下： 1. 给每个导航栏项添加一个 ID，例如第一项的 ID 为 ...这样就可以实现侧边导航栏的自动定位了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值