如果我包含标题,CSS/JS将无法工作

Question

如果我包含标题,CSS/JS将无法工作

Har*_*dev 6 html javascript css jquery include

这是我的index.html档案

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>title</title>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
    <link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
    <link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
    <link rel=stylesheet type=text/css href="assets/css/style.css"/>
  </head>
  <body>
    <div id="inc"></div>

    <div class=main-container>
      <section class="no-pad coming-soon fullscreen-element">


      </section>
    </div>

    <script src=assets/js/jquery.min.js></script>
    <script src=assets/js/bootstrap.min.js></script>
    <script src=assets/js/smooth-scroll.min.js></script>
    <script src=assets/js/scripts.js></script>
    <script>
      $(function(){
        $("#inc").load("header.html");   
      });
    </script> 
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果我复制粘贴header.html身体后面的页面内容,那么一切正常.

当我尝试header.html使用.load()函数包含页面时,CSS将无法正常工作.

这是在线示例代码集,
如果我包含div="inc"来自外部文件的内容,则header.html下拉菜单将相互重叠.

Answer 1

aro*_*ora 1

希望这可以帮助。

您的scripts.js文件包含

$(window).load(function(){

  "use strict";
    // Align Elements Vertically

    alignVertical();
    alignBottom();

    $(window).resize(function(){
        alignVertical();
        alignBottom();
    });

    // Isotope Projects
});

Run Code Online (Sandbox Code Playgroud)

您提供的文件scripts.js正在尝试向header.html.

但它没有执行预期的行为，因为scripts.js文件是在header.html文件之前加载的。

只需将其添加到标题内容的末尾即可

<script src=assets/js/scripts.js></script>

Run Code Online (Sandbox Code Playgroud)

这将使header.html内容首先加载，然后scripts.js

另外这是 github repo 代码结构

https://github.com/siddharharora02/jsLoad

归档时间：	9 年，2 月前
查看次数：	944 次
最近记录：	9 年前