CSS/JS不工作，如果我包括头

CSS/JS won't work if I include the header

本文关键字：如果 包括头 工作 JS CSS      更新时间：2023-09-26

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

如果我将header.html页的内容复制粘贴到正文之后，那么一切都可以正常工作。

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

这是codepen的在线示例
如果我从外部文件(如header.html)中包含div="inc"的内容，那么下拉菜单将相互重叠。

希望对您有所帮助。

您的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的代码结构

https://github.com/siddhartharora02/jsLoad

试试这个

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

原刊

如果你想动态地包含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>

试着这样写，

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

这个呢:

使用iframe

代替load方法
<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>

,

编辑

<iframe id="inc" src="header.html" class="hidden"></iframe>
<标题> css h1> JS

! !这里的触发器是指当你想要加载它时的触发器，比如onClick, onMouseover等等!!

需要jQuery 

$('iframe.hidden').trigger(function() {
  $(this).addClass('load');  
});
相关文章：