怎么把html页面中共用的底部代码做成共享模块

2025-05-11 02:28:10

1、首先,我们新建一个三个html页面,index、header、footer,其中header跟footer是用来放公用的html代码

怎么把html页面中共用的底部代码做成共享模块

2、想要使用疤噜呶买共用模块,这里介绍两种方式,用angularJS或者JQuery。我们先把头部跟底部的代码写在对应的html文件里。可以看到,作为共用模块,我们并不需要像平常设计界面一样写入html、head、body之类的元素,只需要一个div就可以了

怎么把html页面中共用的底部代码做成共享模块
怎么把html页面中共用的底部代码做成共享模块

3、假如你使用了angularJs作为你的js框架,那就使用第一种方式,用angularJs自带的指令导入

怎么把html页面中共用的底部代码做成共享模块
怎么把html页面中共用的底部代码做成共享模块

4、使用angularJs框架的时候,记得用ng-app声明这是一个ng的应用,同时需要为这个应用创建一个控制器controller

怎么把html页面中共用的底部代码做成共享模块

5、假如你没有使用angularJs,那么我们选择第二种方式,JQuery。首先引入jquery包,然后创建两个div,用来放置header跟footer

怎么把html页面中共用的底部代码做成共享模块

6、然后利用jquery的load()事件把公用部分加载进来

怎么把html页面中共用的底部代码做成共享模块

7、最后看看效果,还是一样的。

怎么把html页面中共用的底部代码做成共享模块

8、这就是本次介绍的两种html使用共用模块的方法,其实很简单,具体要选择哪一种就看你自己的需求了。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢