试试这个

Question

这是我的<!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>文件

header.html

如果我将header.html页面的内容复制粘贴到正文后面，那么一切正常。

当我尝试使用 .load() 功能添加div="inc"页面时，CSS无法正常工作。

以下是在线示例codepen
如果我从header.html等外部文件中包含{{1}}的内容，则下拉菜单会相互重叠。

Answer 1

希望这会有所帮助。

您的scripts.js文件包含

$(window).load(function(){

  "use strict";
    // Align Elements Vertically

    alignVertical();
    alignBottom();

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

    // Isotope Projects
});

您提供的scripts.js文件正在尝试向header.html添加一些样式。

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

只需在标题内容

之后添加此内容即可

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

这将使header.html内容首先加载而不是scripts.js

此处还有github repo代码结构

https://github.com/siddhartharora02/jsLoad

Answer 2

试试这个

<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"/>

<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>

Answer 3

尝试使用这样的，

$(document).ready(function() {
    $.get('header.html').success(function(data){
           var headerHTML = data;
           $('#inc').html(headerHTML);
    });
});

Answer 4

对于您的原始问题，

如果您想动态添加html内容，可以使用以下方法

HTML，

<link data-include="includes/header.html">

JS，

$('link[data-include]').each(function(){
    var el = $(this),
        template = $(this).data('include');

    $.get(template, function(data){
        $(el).replaceWith(data);
    });
});

希望这会有所帮助！

试试这个，

现在，您可以根据需要添加任何部分内容。

<!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>

<link data-include="header.html">

<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(){
  $('link[data-include]').each(function(){
    var el = $(this),
        template = $(this).data('include');

    $.get(template, function(data){
        $(el).replaceWith(data);
    });
  });   
});
</script> 
</body>
</html>

Answer 5

这个怎么样：

不使用加载方法，而是使用iframe

<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>

修改

<iframe id="inc" src="header.html" class="hidden"></iframe>

的CSS

iframe.hidden {
  padding: 0;
  margin: 0;
  border: 0;
  overflow: auto;
  display: hidden;
}

iframe.hidden.load {
  padding: 0;
  margin: 0;
  border: 0;
  overflow: auto;
  display: block;
}

JS

!!!这里触发器意味着你希望它加载时的触发器，如onClick，onMouseover等!!!

需要jQuery

$('iframe.hidden').trigger(function() {
  $(this).addClass('load');  
});

如果我包含标题，CSS / JS将无法正常工作

5 个答案:

希望这会有所帮助。

试试这个

试试这个，

这个怎么样：

修改

的CSS

JS