我在同一页中有三段代码，在这三段中我有提交按钮。最初，第一部分应该是可见的，第二和第三部分是隐藏的。从第一节点击按钮，第二节应该可见并隐藏第一节和第三节。从第二部分点击按钮，第一和第二部分应隐藏，第三部分应可见。有人能帮忙吗？
假设您在body标记中遵循了三个部分。
<body>
<section class="allSection firstTimeLoad">
<form action="">
First name 1: <input type="text" name="FirstName" value="Mickey"><br>
Last name 1: <input type="text" name="LastName" value="Mouse"><br>
</form>
<button>Submit Button 1</button>
</section>
<section class="allSection">
<form action="">
First name 2: <input type="text" name="FirstName" value="Mickey"><br>
Last name 2: <input type="text" name="LastName" value="Mouse"><br>
</form>
<button>Submit Button 2</button>
</section>
<section class="allSection">
<form action="">
First name 3: <input type="text" name="FirstName" value="Mickey"><br>
Last name 3: <input type="text" name="LastName" value="Mouse"><br>
</form>
<button>Submit Button 3</button>
</section>
</body>
要隐藏&根据您的解释显示部分，下面应该是您的JS代码。
<script>
$(document).ready(function(){
onPageLoad();
$("button").click(function(){
$(".allSection").hide();
var parent=$('section');
var element = $(this).parent().is(':last-child');
if($(this).parent().is(':last-child'))
$('.firstTimeLoad').show();
else
$(this).parent().next().show();
});
});
function onPageLoad(){
$(".allSection").hide();
$(".firstTimeLoad").show();
}
</script>
试试这个代码
$(document).ready(function(){
$('.section:not(:first-child)').hide();
$(".section button").click(function(){
$('.section').hide();
if( $(this).closest('.section').is(':last-child') ){
$(this).closest('.section').siblings().first().show();
}else{
$(this).closest('.section').next().show();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<section class="section">
<div>
<h2>Section 1</h2>
<p>Ut ex consequat enim ullamco in do do proident ut sint adipisicing mollit do tempor.</p>
</div>
<button>Button 1</button>
</section>
<section class="section">
<div>
<h2>Section 2</h2>
<p>Veniam occaecat aliquip do irure incididunt consectetur aliquip do sit aute non duis mollit sed consequat.</p>
</div>
<button>Button 2</button>
</section>
<section class="section">
<div>
<h2>Section 3</h2>
<p>Sit anim ea eiusmod nulla ut laboris minim consectetur labore anim mollit id excepteur.</p>
</div>
<button>Button 3</button>
</section>
</div>首先创建一个html文件很容易。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.hide {
display: none;
}
</style>
<body>
<section id="section-1">
Section 1
<button data-section-id="1">Next</button>
</section>
<section id="section-2" class="hide">
Section 2
<button data-section-id="2">Next</button>
</section>
<section id="section-3" class="hide">
Section 3
<button data-section-id="3">Next</button>
</section>
<script src="./js/script.js"></script>
</body>
</html>
然后是一个包含代码的script.js文件。
(() => {
"use strict";
document.querySelectorAll("button").forEach((e) => {
e.addEventListener("click", showNext);
});
function showNext(e) {
let nextId, sectionId;
sectionId = parseInt(e.target.getAttribute("data-section-id"));
document.getElementById(`section-${sectionId}`).style.display = "none";
// Next section id
if (sectionId == 3) {
nextId = 1;
} else {
// Get section id
nextId = sectionId + 1;
}
document.getElementById(`section-${nextId}`).style.display = "block";
}
})();