我正在设置一个jquery选项卡式内容页面，其中HTML表单被组织成多个选项卡，每个选项卡都有一个Next按钮，可以让用户前进到下一个选项卡。我的问题是，在单击第一个选项卡上的Next按钮后，它会向右跳转以提交表单，而不是仅仅前进到下一个选项卡。我无法在jquery中找到原因，因为我正在使用click函数触发显示/隐藏每个制表符/div
希望有人能帮我找出问题所在
var initialLoad = true;
$(document).ready(function() {
// Hide all tabs except the first one
$("#tab2, #tab3, #tab4").hide();
initialLoad = false;
if (initialLoad == 'false') {
// Show tab2 when "Next" is clicked on tab1
$("#buttonone").click(function() {
$("#tab1").hide();
$("#tab2").show();
$("#tab3").hide();
$("#tab4").hide();
});
// Show tab3 when "Next" is clicked on tab2
$("#buttontwo").click(function() {
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").show();
$("#tab4").hide();
});
// Show tab4 when "Next" is clicked on tab3
$("#buttonthree").click(function() {
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#tab4").show();
});
}
});<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<form id="form" action="appointment-success.php" method="post">
<div id="tab1">
<h2>Select a Service</h2>
<p><small>Can select more then one</small></p>
<button id="buttonone" class='btn btn-success'>Next</button>
</div>
<div id="tab2">
<h2>Select a Barber</h2>
<button id="buttontwo" class='btn btn-success'>Next</button>
</div>
<div id="tab3">
<h2>Select a Date & Time</h2>
<button id="buttonthree" class='btn btn-success'>Next</button>
</div>
<div id="tab4">
<h2>Tell Us Who You Are</h2>
<input type="submit" name="createappt" value="Submit Appointment">
</div>
</form>
1条答案
按热度按时间xzv2uavs1#
正如Swati在评论部分所说，您必须为每个按钮添加
type="button"，否则它们将触发表单的submit事件，因为按钮的默认类型是submit关于您的
initialLoad，我们可以得出两个结论：initialLoad是一个布尔值（true/false），所以在if语句中，您将其与字符串进行比较，因此这将不起作用。1.如果你不使用
initialLoad做任何其他事情，那么你可以完全删除它。在你的.ready()中，你设置initialLoad为false，然后询问它是否为false。如果你删除if语句和initialLoad，这也会起到同样的作用。如果你做到了以上几点，你的代码就可以工作了，但是如果你想让你的代码更动态一点，你也可以这样做。
x一个一个一个一个x一个一个二个x