Jquery - 单击按钮将 html 加载到一个 div 中，但使另一个 div 不可见答案

【问题标题】：Jquery - clicking the button loads the html in one div but makes the other div invisibleJquery - 单击按钮将 html 加载到一个 div 中，但使另一个 div 不可见
【发布时间】：2017-07-02 20:17:31
【问题描述】：

我是 Jquery 的新手。我有 3 个 div，第一个 div 是标题，第二个 div 包含幻灯片图像以及按钮，第三个 div 在单击按钮时显示。第三个 div 加载了外部 HTML 文件。单击按钮后加载第三个 div 时，第二个 div 不可见。请帮帮我。问题如下图所示 screenshot of the output screenshot

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="MainScreen.css">
<script type="text/javascript"></script>
<script src="MainScreenJavaScript.js"></script>
<script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<style>
     body{
        font-family: "Times New Roman", Georgia, Serif;
         }
</style>


</head>
<body>

<!-- Navbar top -->
<div class="topnav" id="myTopnav">
<a href="#home" class="colors" >HOME</a>
<a href="Resume.html"  class="colors" >ABOUT</a>
<a href="contact.html" class="colors" >CONTACT</a>
<a href="#icon" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<!--Slide show -->
<div class="slideshow-container ">
   <div class="mySlides fade">
   <img src="laptop.jpg" class="image">
   <div class="text">Keen to learn many things</div>
 </div>

 <div class="mySlides fade">
  <img src="travel2.jpg" class="image">
   <div class="text">Like to travel</div>
 </div>

 <div class="mySlides fade">
  <img src="education.jpg" class="image">
  <div class="text">Education and Background</div>
 </div>

 <div class="mySlides fade">
  <img src="cook1.jpg" class="image">
  <div class="text" >
    <button id="cookButton" onclick="loadExternalHtml()">Love for 
        Cooking</button>
  </div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <!-- dots-->
  <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
      <span class="dot" onclick="currentSlide(4)"></span>
   </div>

   <div id="content"></div>

   <script type="text/javascript">
     var slideIndex =1;
      showSlides(slideIndex);

      function loadExternalHtml(){
          $(document).ready(function(){
           $("#cookButton").click(function(){
             $("#content").load("foodBlog.html"); //load html page onclicking the button

      });

    });
   }


  </script>

   </body>
 </html>

这是我的 foodBlog.html

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
    bootstrap.min.css">
<script 
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 </script>
   </head>

   <body>

  <div class="container" >
       <div class="row">
     <div class="col-md-4">
    <div class="thumbnail">
    <img src="text.jpg" class="img-rounded"  alt="text" 
   style="width:100%;height:250px">
   <h3>text</h3>
   <p>It is a street food</p>
  </div>
 </div>
  <div class="col-md-4 ">
   <div class="thumbnail">
    <img src="text1.jpg" class="img-rounded"  alt="text1" 
    style="width:100%;height:250px;">
  <h3>text1</h3>
   <p>text1</p>
 </div>
 </div>

 <div class="col-md-4">
   <div class="thumbnail">
    <img src="text2.jpg" class="img-rounded"  alt="text1" 
     style="width:100%;height:250px;">
    <h3>text2</h3>
     <p>text2</p>
    </div>
   </div>

  </div>
  </div>

 </body>
</html>

【问题讨论】：

foodBlog.html 里面有什么？
我连续有 3 个 div，其中包括带文本的图像。我正在使用引导程序。

标签： jquery html css bootstrap-4

【解决方案1】：

<div id="content"></div>

是 slideshow-container 的子代，content 和 slideshow-container 的行为取决于 CSS。当您将content 移出slideshow-container 时，您会看到什么？

也可以尝试：float:left; 或 overflow:hidden; content

比 HTML 和 jQuery 脚本更重要的是用于此 ID 和类的 CSS。

【讨论】：

内容在幻灯片容器之外。我尝试使用溢出：隐藏和浮动：左。但没有区别。
请帮帮我。我观察到我正在加载的 HTML 文件是带有引导程序的。可能正因为如此，带有图像的幻灯片 div 不可见。
如果你不包含 bootstrap.css 那么类名不会对你的 CSS 产生影响......而且我们也只能猜测什么是错误的而没有看到它。把它放在某个服务器上并显示，也许有人会帮忙。
感谢迈克尔的回复。我该怎么做？我以前没做过。如果您指导我，那将有很大帮助。
当我运行文件时，我会得到这个错误。 jquery.min.js:4 XMLHttpRequest 无法加载文件：///E:/complete%20web%20developer%20course/rashmirangaswamaiah/foodBlog.html。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。因此，我使用了 200 ok 网络服务器，以便将外部 html 文件加载到 div 中。