gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:28:11 24 4
gpt4 key购买 nike

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

最佳答案

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

slideshow-container 的子元素,contentslideshow-container 的行为取决于 CSS。当您将 content 移出 slideshow-container 时,您会看到什么?

也可以尝试:float:left;overflow:hidden; 用于 content

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

关于Jquery - 单击按钮将 html 加载到一个 div 中,但使另一个 div 不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44874860/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com