包含了使用jQuery的header.html和丢失的CSS格式。

Question

我有一个简单的静态HTML网站，里面有一个header.html文件，我想在每个页面上重复使用。我遵循了以下的建议 如何使用jquery.load()在内容之前加载页眉和页脚？ 看似可行，但却导致下拉的功能失效（必须点击）。上面是使用jQuery.load的导航条，下面是在index.html中内嵌的相同代码，我的css和js文件都包含在index.html文件中，而不是在header.html文件中。我的css和js文件都包含在index.html文件中，而不是在header.html文件中。请问为什么会出现这种情况？

在我的头部，我有以下代码。

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

...并包含了我的headerfooter。

<div id="header"></div>

我的当前header.html文件的内容。

<section class="header-uper">
     <div class="container clearfix">
        <div class="logo">
           <figure>
              <a href="index.html">
              <img src="images/logo.png" alt="" width="250em">
              </a>
           </figure>
        </div>
        <div class="right-side header-padding">
           <ul class="contact-info">
              <li class="item">
                 <div class="icon-box">
                    <i class="fa fa-envelope-o spacer"></i>
                 </div>
                 <strong>Email</strong>
                 <br>
                 <a href="#">
                 <span>customer email</span>
                 </a>
              </li>
              <li class="item">
                 <div class="icon-box">
                    <i class="fa fa-phone spacer"></i>
                 </div>
                 <strong>Call Now</strong>
                 <br>
                 <span>customer #</span>
              </li>
           </ul>
        </div>
     </div>
  </section>
<header class="navbar navbar-default">
   <div class="container">
      <div class="HeaderRow">
         <div class="col-md-12">
            <!-- header-right start -->
            <!-- ================ -->
            <div class="header-right clearfix">
               <!-- main-navigation start -->
               <!-- ================ -->
               <div class="main-navigation animated">
                  <!-- navbar start -->
                  <!-- ================ -->
                  <nav class="navbar navbar-default" role="navigation">
                     <div class="container-fluid">
                        <!-- Toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           </button>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="navbar-collapse-1">
                           <ul class="nav navbar-nav navbar">
                              <li class="active"><a href="index.html">Home</a></li>
                              <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Practice <span class="caret"></span></a>
                                 <ul class="dropdown-menu">
                                    <li><a href="about.html">About Dr. Eaton</a></li>
                                    <li><a href="#">Staff</a></li>
                                    <li><a href="#">Our Office</a></li>
                                    <li><a href="services.html">Services</a></li>
                                 </ul>
                              </li>
                              <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Education <span class="caret"></span></a>
                                 <ul class="dropdown-menu">
                                    <li><a href="education.html">Eye Education</a></li>
                                    <li><a href="covid19.html">Covid 19 Safety Plan</a></li>
                                 </ul>
                              </li>
                              <li><a href="#">Optical</a></li>
                              <li><a href="insurance.html">Insurances</a></li>
                              <li><a href="contact.html">Forms & Contact Us</a></li>                              
                           </ul>
                        </div>
                     </div>
                  </nav>
                  <!-- navbar end -->
               </div>
               <!-- main-navigation end -->
            </div>
            <!-- header-right end -->
         </div>
      </div>
   </div>
</header>

Answer 1

转帖作为回答，有利可图的信誉......

你说你正在加载内容到这里。

<div id="header"></div>

听起来像是在DOM中添加了一个新的元素 如果你还没有准备好的话，这可能会破坏你的CSS选择器规范。div#header 要出现在他们中间。我先看这里。

另一个问题是，DOM要被? ready 和 <header> 将尚未被加载。然后你使用jQuery将新的元素加载到DOM中，一旦DOM完成加载新的HTML，这些元素可能仍然需要初始化。