首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ajax实现简单点击左侧菜单,右侧加载不同网页

实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带服务器中打开浏览效果即可) 图片.png 原理...:ajax局部刷新原理:通过.load()重新加载页面中某一部分,巧妙借助data-*自定义属性来存储数据,点击时候修改锚点,因为地址有变,所以刷新时候仍然会保持当前页面内容而不是切换到第一个...遇到ajax局部刷新需求也有很多,有时候比较简单,当内容较少,适合做成选项卡,如果网页左侧有一个列表,点击列表使右侧内容进行切换,如果右侧内容过多,不适合做选项卡,这时候用.load()局部刷新最好不过了.../style> <script src="http://code.jquery.com/jquery-1.8.0.min.<em>js</em>...break; } $("#content").load(pathn); //加载相对应内容

3.4K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    左侧导航click,右侧内容scroll——一个模拟外卖点单简易页面

    本人很少做移动端东西,这是一个小伙伴发过来案例。功能很明确,就是点击左侧菜单,右侧内容对应滚动指定;右侧内容滚动,左侧菜单对应高亮。 ?...点单简易页面,emmmm..简洁得特别简陋 一、 问题描述 这个demo有两处问题: 1. 点击切换左侧菜单时,由于右侧内容滚动也触发了scroll事件,导致互相影响; ?...造成菜单栏闪烁问题 2. 由于滚动高度限制,点击左侧6/7/8菜单时,右侧对应内容不会置顶 (当然,这个特征在目前各大外卖平台产品设计就是不让置顶,但此处设计就是想点谁谁up)。 ?...滚动高度限制 二、问题分析与解决 1.事件冲突问题 这个问题我们可以考虑,在左侧菜单点击触发动画前,禁用右侧滚动事件,等动画结束后再启动右侧滚动事件。具体实现,可以通过一个标志来设定。...如下代码,添加3行: // 左侧菜单点击事件 $(".menu-left").on('click','li',function(){

    2K10

    JS设置标签内容和样式

    掌握JS操作符目的是为了能够灵活操作变量,以便完成JS各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生问题,能够让我们更好完成JS各种功能。...而今天我们主要讲解JS逻辑和DOM结合 - JS设置标签内容和样式。 Tips:由于上一期文章篇幅过长,微信文章有字数要求,所以小编把部分内容(操作符)放到这一期进行讲解。...基础算是告一段落了,希望大家能把JS基础打扎实,它直接影响着后期JS学习。...3 获取/设置标签内容 现在可以利用JS来控制标签样式,能否利用JS控制标签内容?当然可以,我们可以使用innerHTML属性实现修改或获取标签中内容。...,为实现动态交互效果打下一定基础; 掌握操作标签内容目的在于能够灵活操作标签内容,能够更好辅助页面交互效果实现。

    20.4K90

    JVM垃圾回收 “三色标记算法” 实现,内容太干!

    JVM中CMS、G1垃圾回收器所使用垃圾回收算法即为三色标记法。 三色标记算法思想 三色标记法将对象颜色分为了黑、灰、白,三种颜色。 白色:该对象没有被标记过。...(对象垃圾) 灰色:该对象已经被标记过了,但该对象下属性没有全被标记完。(GC需要从此对象中去寻找垃圾) 黑色:该对象已经被标记过了,且该对象下属性也全部都被标记过了。...STW(Stop The World),再次进行扫描,此时因为黑色对象属性都也已经被标记过了,所以只需找出灰色对象并顺着继续往下标记(且因为大部分标记工作已经在第一次并发时候发生了,所以灰色对象数量会很少...垃圾) 三色标记存在问题 浮动垃圾:并发标记过程中,若一个已经被标记成黑色或者灰色对象,突然变成了垃圾,由于不会再对黑色标记对象重新扫描,所以不会被发现,那么这个对象不是白色但是不会被清除,重新标记也不能从...; 重新标记阶段则是为了修正并发标记期间,因用户程序继续运作而导致标记产生变动那一部分对象标记记录,这个阶段停顿时间通常会比初始标记阶段稍长一些,但也远比并发标记阶段时间短; 最后是并发清除阶段

    44320

    Vue.js如何阻止子组件点击事件?

    在实际开发中,我们有时候会遇到需要控制子组件行为需求。比方说我最近遇到一个问题,我需要在特定场景下,在父页面禁用子组件点击事件,包括不限于子组件本身以及子组件内部子组件点击事件。...下面我将使用 Ant Design Vue 框架实现一个示例,来展示如何在 Vue.js 中阻止子组件点击事件。问题描述在表单业务中,有一个封装子组件(包含 input 和 modal)。...如果选择框值为空,则弹窗中查询结果将为空,这个显然不是我想要。为了保证每次弹窗查询列表是有值,我要做是,当外部表单两个选择框为空时,阻止子组件点击事件,并给用户弹出错误提示。...总结在 Vue.js 中阻止子组件点击事件有多种方式可供选择。通过在子组件中添加 prop 进行条件判断,可以明确传递状态控制子组件行为,但需要修改子组件代码,增加了耦合度。...在实际开发中,我们可以根据具体需求选择合适方法来实现子组件点击事件控制。希望这篇文章能为你在 Vue.js 开发中遇到类似问题时提供一些思路和帮助。

    26610

    VUE项目后台管理系统(四)左边菜单动态展示,不仅可以折叠,而且点击不同菜单,右边展示不同页面

    目录 左边菜单动态展示 左边菜单属性介绍 遍历菜单 左边菜单折叠效果 不同菜单右面展示不同页面 左边菜单动态展示 首先后端接口要返回菜单list集合,是json格式,我使用是python...如何实现以上效果。 首先做一个点击那个区域 在菜单上面加一个div就可以了 ?...点击上面的区域时候,可以折叠,那么就需要在上面区域div上面做一个事件,也就是一个方法。点击时候变为true ? 点击让这个属性转换一下就可以了。...因为是同一个页面,只是右边展示不一样页面,所以我们需要将不同页面放到右边,所以我们可以将不同页面的路径设置为当前菜单所在页面的路径子路径,也就是只要设置 ?...之后在右边写一个占位符 ? 以上就实现了点击不同菜单,右边展示不同页面

    1.3K10

    JS实现动态获取当前点击事件id属性值

    原本要实现功能如下: 点击下图播放按钮,要弹窗播放对应视频链接。...整个页面是通过ajax请求最新4部视频进行填充完成,视频列表又是通过template-web.js插件补上去,所以导致所有ID值都是一样,一开始给按钮添加一个事件,结果是所有播放按钮都是播放第一个视频...于是,想了好多办法,又把ID属性给弄成动态ajax请求属性值,实现了每个id不一样,接下来,因为点击播放要调用一个方法,进行解析视频播放,拼接成API+视频链接格式在新打开弹窗进行展示。...具体可以看下图: 要实现点击不同按钮,并且按钮ID是动态从ajax请求获取,还要添加点击视频拼接视频链接,参考了文章,可以获取点击按钮id值,然后使用button,将链接放在value中 Dom...对象id属性可以获取元素id值。

    25.8K20

    Servlet与Jsp结合使用实现信息管理系统一

    Servlet(Server Applet)是Java Servlet简称,称为小服务程序或服务连接器,用Java编写服务器端程序,主要功能在于交互式地浏览和修改数据,生成动态Web内容。...JSP技术有点类似ASP技术,它是在传统网页HTML(标准通用标记语言子集)文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件,后缀名为...先创建主文件index.jsphomepage.jsp是左边全部(点击全部在右边显示) wendang.jsp(点击文档显示在右边) head.jsp用来显示最上面的信息。...从上往下开始搭建 把菜单抽取出来, 加载jQuery、bootstrap、css等 1.1:加载js文件和css文件,这里用是联网,需要网络才可以。...head.jsp 背景颜色可随便改 1.4,点击左侧菜单改变背景颜色

    2.5K90

    js获取iframe中内容(iframe内嵌页面)

    大家好,又见面了,我是你们朋友全栈君。 js 如何获取包含自己iframe 属性 a.html 如何在b.html里获取包含他iframeid 在父页面中定义函数,再到子页面中调用。...function getFrameId(f){ var frames = document.getElementsByTagName(“iframe”); //获取父页面所有iframe for(i=0;i js...怎样获取iframe,src中参数 如何获取iframe里src里面的属性 js如何修改iframe 中元素属性 iframe 属性 及用法越详细越好 。。。。。。...在线等 iframe元素功能是在一个html内嵌一个文档,创建一个浮动郑iframe可以嵌在网页中任意部分 name:内嵌帧名称 width:内嵌帧宽度(可用像素值或百分比) height:内嵌帧高度...JavaScript如何修改页面中iframe属性值 HTML5有客户端数据储存方法,但是支持浏览器不多。

    24.6K50

    JavaScript 技术篇 - js读取Excel文档里内容实例演示,js如何读取excel指定单元格内容js将excel内容转化为json字符串方法

    JavaScript 读取 Excel 文档里内容实例演示 第一章:准备 ① 下载 xlsx.full.min.js 支持包 第二章:功能实现与使用演示 ① 实现代码 ② 使用效果演示 ③ 获取指定单元格内容...④ 将读取 Excel 内容转化为 json 字符串 第一章:准备 ① 下载 xlsx.full.min.js 支持包 获取地址: 官方 Github 小蓝枣 csdn 资源仓库 在点进 Raw...DOCTYPE html> 小蓝枣-js读取Excel演示 <script...③ 获取指定单元格内容 通过 sheets['单元格'].v; 或 sheets.单元格.v; 可以获取指定单元格里内容。...④ 将读取 Excel 内容转化为 json 字符串 通过 JSON.stringify(XLSX.utils.sheet_to_json(sheets)); 可以将 sheet 页签内容转化为 json

    8.6K30
    领券