运用jquery抽离出html公用部分实现多页面复用

lerry_lca

于 2020-12-23 20:45:10 发布

阅读量2.8k

点赞数 6

分类专栏： Java与开发文章标签： javascript js html jquery

本文链接：https://blog.csdn.net/qq_33187136/article/details/111598598

版权

7 篇文章

订阅专栏

本文介绍了一种利用jQuery简化前端开发的方法，通过将多个HTML页面中的公共导航栏部分进行抽取并复用，减少重复工作量，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

假设有多个html页面，每一个都有一个公共的导航栏，那么可以使用jQuery把导航栏这部分抽离出来，使得多个页面复用这部分，而不是每个html页面都维护相同的这段前端代码。

<!--假设这是公共导航栏部分的html代码，单独保存到header.html--> 
<ul>
    <li>导航栏标签1</li>
    <li>导航栏标签2</li>
</ul>

...
<!--导航栏-->
<div class="header-page"></div>
...
<script>
	//加载header.html
    $('.header-page').load('header.html');
</script>

或者把这段脚本单独放到一个js里，其他html引用这个js

// 假设这段脚本保存到header.js
$(document).ready(function () {
    //加载header.html
    $('.header-page').load('header.html');
});

那么其他html页面可以这样导入

<!--这部分可以放到head里和其他js脚本一起--> 
<script src="js/header.js"></script>