Question

我在root .my主页中有header.html和footer.html在文件夹＆＃34; MainPages＆＃34;。我使用脚本来调用header.html和footer.html。但是当我双击页面时，我看不到Header.html和footer.html。这是我的文件夹和我的主页（＆＃34; bio.html＆＃34;）（bio.html位于MainPages＆＃34;文件夹中）。

<head>
    <title></title>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/normalize.min.css" rel="stylesheet" />
    <link href="../Content/font-awesome.min.css" rel="stylesheet" />

    <script src="../Scripts/jquery-1.10.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>

    <link href="../Content/css/animate.css" rel="stylesheet" />

    <script src="../Scripts/modernizr-2.6.2.min.js"></script>
    <script src="../Scripts/revealOnscroll.js"></script>
    <link href="../Content/ava.css" rel="stylesheet" />
    <script>
        $(function () {
            $("#Header").load("../Header.html");
        });
    </script>
    <script>
        $(function () {
            $("#Footer").load("../Footer.html");
        });
    </script>

</head>

<body style="background-image: url(../images/sample_bg.jpg);">

    <!--header-part-->
    <div id="Header"></div>

    <br /><br /><br /><br /><br /><br /><br /><br />

    <div class=" container-fluid col-md-offset-2 row col-md-8 col-md-offset-2  "
         style=" font-family: Mitra;background-image:url(../images/bio/bio-2.jpg);background-size:500px,500px;
        background-repeat: no-repeat;background-position-x:right;background-position-y:top;
            background-color:#fff ;clear:none;padding: 0px;">
        <div class="container-fluid ">
            <div class="row ">


                <div class=" col-md-offset-1 col-md-9 ">
                    <div class="row">

                        <div class="bio-contex-1">

                            <span>

                                this is my main page for testing
                            </span>

                        </div>


                    </div>
                    <br />
                </div>

            </div>

        </div>
    </div>

    <!--footer-->

    <div id="Footer"></div>

    </body>
</html>

Answer 1

您需要运行本地网络服务器，因为您可能在file:///

下的jquery中加载文件时遇到问题

设置网络服务器，然后尝试再次加载它们。

使用npm：http-server

Answer 2

将../改为/

e.g

  <link href="/Content/bootstrap.min.css" rel="stylesheet" />

更改文件夹时，jquery脚本不起作用

2 个答案: