使用jquery.load()引入公共头部页面不显示

最新推荐文章于 2022-10-27 10:05:31 发布

北辞高米店南

最新推荐文章于 2022-10-27 10:05:31 发布

阅读量806

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44597266/article/details/125060573

版权

使用前我们需要引入jQuery：

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

jQuery版本链接

开源库的链接

如何使用load() 代码如下:

    <script>
        $(function () {
            $("#header").load("./header.html")
            $("#footer").load("./footer.html");
        });
    </script>

使用起来非常的方便，头部、尾部的css样式也只需要引入就好了。

html代码如下:

    <header id="header"></header>
    <div>
        <!-- 内容 -->
    </div>
    <footer id="footer"></footer>

我们做完这些以后发现打开html页面并没有看到我引入的头部和尾部，经过小弟的一番了解jQuery.load()这个方法需要在服务器模式下才可以使用，也就是说我们在本地打开html并不会显示出头部。

解决办法

我用的vsCode就拿vsCode举例

我们在扩展里面搜索

Live Server

安装完成后在需要打开的页面右键

ps:

我们使用的header.html只需要我们要用的标签代码如下：

<!--header-->
    <div class="topMenu">
        <img class="logoImage" src="../images/stitic/logo.png" >
        <ul class="topUl">
            <li id="navigation_1">
                <a href="/pc/index.html">首页</a>
            </li>
            <li id="navigation_2">
                <a href="/pc/weightTrainingCamp.html">减重训练营</a>
            </li>
            <li id="navigation_3">
                <a href="/pc/yuanshen_trainingBase.html">源深基地</a>
            </li>
            <li id="navigation_4">
                <a href="/pc/successCase.html">成功案例</a>
            </li>
            <li id="navigation_5">
                <a href="/pc/faculty.html">师资力量</a>
            </li>
            <li id="navigation_6">
                <a href="/pc/knowledge.html">减重知识</a>
            </li>
            <li id="navigation_7">
                <a href="/pc/trend.html">新闻动态</a>
            </li>
            <li id="navigation_8">
                <a href="/pc/aboutUs.html">关于我们</a>
            </li>
        </ul>
    </div>
<!--header-end-->