利用jQuery load 方法加载HTML公共页面,导航菜单自动选中

最新推荐文章于 2024-06-23 11:57:29 发布
最新推荐文章于 2024-06-23 11:57:29 发布
阅读量1.7w 收藏 13
点赞数 5
文章标签： jQuery html 导航 公共页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaogege2012/article/details/73657973
版权
本文介绍了如何在纯静态页面中利用jQuery的load方法加载header.html、footer.html和nav.html等公共页面，以避免重复编写。通过在index.html中引入jQuery库，预留公共页面位置，并创建一个公共JS文件来处理导航菜单的选中状态，实现了导航菜单的自动选中功能。
摘要由CSDN通过智能技术生成

最近做了一个纯静态页面的网页，有一些页面的公共部分，不想重复在每一个html 中编写，想用

<!-- #include file="header.html" --> ,发现引用不了，不起作用。

后来知道，include是SSI（Server Side Include），在html中不支持include。

最低0.47元/天 解锁文章
笑格格
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
load()方法---------jQuery动态加载html
weixin_30339457的博客
01-05 1826
我的个人德州扑克项目https://github.com/mingzijian/pokers，欢迎给星星。 jquery代码 $("#div").load("test.html"); test.html ----------------被加载页面（有<HTML><HEAD><META><BODY>等的完整页面 ） $...
使用jQuery的 load() 方法加载html公共模块
橙-极纪元-cplvfx-JJY.Cheng
03-18 4219
例如：网站头部 $(".header").load("header.html"); 例如：网站导航 $(".nav").load("nav.html"); 例如：网站底部 $(".footer").load("footer.html"); 官方解释 转载：https://www.runoob.com/jquery/jquery-ajax-load.html jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 lo..
Javascript：页面加载事件load
最新发布
听海边涛声
06-23 317
Javascript：页面加载事件load
使用jquery.load 处理 HTML页面公共部分引入
King Saj
12-03 1748
HTML公用部分抽离出来使用,使后期维护起来更加方便 创建一个index.html页面, 和common文件夹(用来存储公用页面部分) header.html <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">头部公共部分</h1> </header> footer.html <footer>底部公用内容</footer> index.html <!DOC
使用jquery的load方法加载html页面，但是html引入的js不生效
热门推荐
monkeyfly学前端
10-24 6万+
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 前提 有一个公共的登录弹框页面需要在多个页面引用，百度后就使用了jQuery 的 load 方法。 做法： 将公共的 html 页面提取出来，放在一个独立的 HTML 文件中。 然后在需要使用的 html 页面中，使用 jQuery 的 load 方法进行引用即可。 注：提取的部分，不需要包含多余的&amp;amp;amp;lt;head&amp;amp;amp;g...
jquery load html片段,jQuery .load（）调用未在加载的HTML文件中执行JavaScript
weixin_30046717的博客
06-21 134
小编典典您正在将整个HTML页面加载到div中，包括html，head和body标签。如果您执行加载并且仅在加载的HTML中包含打开脚本，关闭脚本和JavaScript代码，会发生什么情况？这是驱动程序页面：jQuery Load of Scriptgoogle.load("jquery", "1.3.2");$(document).ready(function(){$("#myButton")....
jquery 动态加载html,利用JQuery的load函数动态加载其它页面的内容的实现代码
weixin_30349167的博客
06-08 191
在线演示:http://demo.jb51.net/js/JQueryload/index.htm全部代码JQuery - Load#header {margin-bottom: 1em;padding-bottom: 1em;border-bottom: 1px solid #eee;}.buttonListArea {float: left;width: 150px;padding-right...
jQuery圆角导航菜单
05-01
"jQuery圆角导航菜单"是一个利用jQuery库实现的、具有圆角效果的一级导航菜单，适用于那些希望为网站添加美观且易用导航功能的开发者。jQuery是一种轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
jQuery文章目录索引导航菜单特效代码
03-20
此外，为了实现导航菜单高亮当前选中的章节，我们需要记录当前滚动位置，并对比导航菜单中的链接，当页面滚动到某个章节时，将其对应的导航菜单项标记为高亮： ```javascript $(window).scroll(function() { var ...
jquery仿天猫左侧导航菜单分类列表
07-24
"jquery仿天猫左侧导航菜单分类列表"就是一个很好的实例，它利用jQuery库来实现类似天猫网站左侧的导航菜单效果。这个项目可以帮助开发者理解如何用JavaScript和jQuery构建动态、响应式的导航结构。 首先，jQuery是...
jquery左侧工具栏菜单.zip
11-24
如果菜单包含动态加载的内容，可能还会用到jQuery的Ajax功能，通过`.ajax()`或`.load()`方法从服务器获取数据，实现实时更新。 总结来说，"jquery左侧工具栏菜单.zip"包含了一个结合了HTML5、CSS和jQuery技术的前端...
windows8风格jquery菜单特效.zip
11-25
1. 动态加载：使用`.load()`方法加载内容到磁贴。 2. 事件绑定：使用`.on()`方法绑定点击事件，当用户点击磁贴时触发相应动作。 3. 动画效果：利用`.animate()`和`.toggleClass()`实现平滑的过渡效果，如磁贴放大或...
使用jquery导入页面的公共部分，亲测有效
weixin_44773752的博客
04-02 693
使用ajax获取访问路径中的页面内容，在插入到要渲染的页面上。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jquery的包--> <script type="text/javascript" src="js/jquery-3.5.1.js"></script> </hea
Jquery load()方法加载html片段
this_ITBoy的博客
03-16 1万+
在上一个案例中用的ajax加载html片段实现导航的切换，这次的这个案例用同样的方法却不是很好实现。 案例:在一个导航栏中，实现点击导航出现不同的选择区域，而且每个页面都有下拉分页异步刷新的效果。如图：                  图1       图2                   图3 图4 上图中，图2和图4都有下拉分页异步刷新的效果，也就是只要有
JS和JQ页面加载
qq_39529315的博客
08-15 573
每次要用的时候都忘了怎么写。。。 原生JS： window.onload=function(){ alert("1"); }; JQ： 简写形式 $(function(){ alert("2"); }); 完整形式： $(document).ready(function(){ alert("3"); }); 他们在功能方式上有一点区别，window.onload在所有的...
jquery 抽离公共页面
仲广绪的博客
05-16 1253
抽离公共页面 a页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
用jQuery的load方法动态加载页面，以及脚本问题
weilikk的博客
08-19 6464
一、了解load方法 load(url, [data], [callback]) 概述 载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。请查看示例。 参数 url,[data,[callback]]String,Map/String,CallbackV1.0
加载HTML公共页面 导航菜单自动选中,利用jQuery load 方法加载HTML公共页面,导航菜单自动选中...
weixin_42131541的博客
06-01 469
最近做了一个纯静态页面的网页，有一些页面的公共部分，不想重复在每一个html 中编写，想用,发现引用不了，不起作用。后来知道，include是SSI(Server Side Include)，在html中不支持include。查了下资料，看到jQuery的load方法可以引用其他html页面，用了下，果然很方便。记录一下公共页面：header.html , footer.html ,...
jq自动生成一个html文件,通过jquery的load 加载另一个html文件 怎么获取里面的文本？...
weixin_36481059的博客
06-03 256
给你个例子(例子有点丑 见谅)先贴代码：$(document).ready(function(){$("button").click(function(){$("#div1").load("1.html #demo");console.log($("#demo").text())});});然后贴效果图：(说明一下，console.log()在load把页面加载出来的时候还是没有打印 是我又重...
jquery的load()方法加载数据到表格
04-22
jQuery的load()方法可以用于将数据加载到HTML元素中，包括表格。具体实现步骤如下： 1. 在HTML页面中创建一个table元素，并在其中定义表头和表格内容： ``` <th>ID <th>Name <th>Age ``` 2. 在...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值