我正在制作一个带有预加载视频背景的网站，因此我的所有内容都需要位于同一页面上。例如，我有一个 div，我的第一部分是“slide1”。我需要删除这个 div 并在单击按钮时将其替换为“slide2”。我试过使用 javascript 在点击时加载“slide2”的 html，但我试过的代码只是将 div 写入没有样式的白页。我需要将它加载到我的内容 div 中，并使用适当的样式。
我的html代码:
<script src="assets/js/introduction.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<div id="slide1">
<p>Here is the first trigger. It should look something like this</p>
<p><input type="button" onclick="part2()" value="Click Me!" /></p>
</div>
</div>
包含以下内容的 javascript 文件:
function part2() {
document.write('\
<div id="slide2">\
<p>Here is the second trigger. It should be to the left</p>\
<p>next line goes here</p>\
</div>'
);
}
我已经坚持了好几天了，这让我发疯。任何帮助都会很棒
最佳答案
为什么不直接在 html 中创建所有幻灯片并隐藏除幻灯片 1 之外的所有幻灯片？ 然后，当他们单击按钮时，隐藏幻灯片 1 并显示幻灯片 2。类似这样的内容
<div id="content">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
</div>
<a href="#" id="next-button">Next</a>
JS
$(function(){
var currentSlide = 0;
$(".slide").hide();
$(".slide:eq(0)").show();
$("#next-button").on("click",function(e){
e.preventDefault();
$(".slide:eq(" + currentSlide + ")").hide();
if(currentSlide == $(".slide").length - 1){
currentSlide = 0;
}else{
currentSlide++;
}
$(".slide:eq("+ currentSlide +")").show();
});
});
关于javascript - 使用 Jquery 或 JS 添加和删除 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23370251/