我是Jquery的新手，并且正在开发一些在线教程。在每个教程中，我希望每个阶段都在您单击下一步按钮时淡入一个，然后在您显示了最后一个阶段时，下一个按钮应该隐藏，而新的下一个按钮在单击时应该带您进入下一个教程。我正在使用ID在HTML中分配段落。因为我正在做很多教程，每个教程中都有不同的步骤数，所以我想根据每个教程中的步骤数轻松地更改此代码。我已经尝试编写此代码，尽管我的代码可以实现我想要的功能，但它非常凌乱且冗长，我认为必须有更短的方法。这是我的HTML：
<div>
<p id="text1">Step one goes here</p>
<p id="text2">Step two goes here</p>
<p id="text3">Step three goes here</p>
<p id="nextstep"><a href="#">Next Step</a></p>
<p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p>
</div>
谢谢编辑：我只想使用HTML和Javascript
使用jQuery可以实现多种方法，主要取决于您想成为“魔术师”的程度。
一种相当简单的策略是拥有一个名为stepNumber的全局变量，并在您的步骤上添加一个data属性，如下所示：
var stepNumber = 1;
$(function(){
$('p[data-step-id="' + stepNumber + '"]').show();
$('#nextstep').click(function(){
$('p[data-step-id="' + stepNumber++ + '"]').fadeOut();
$('p[data-step-id="' + stepNumber + '"]').fadeIn();
});
});.step {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="text1" class="step" data-step-id="1">Step one goes here</p>
<p id="text2" class="step" data-step-id="2">Step two goes here</p>
<p id="text3" class="step" data-step-id="3">Step three goes here</p>
<p id="nextstep"><a href="#">Next Step</a></p>
<p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p>
</div>这种方法与您的步骤结构完全无关，它们甚至不必按正确的顺序排列。这种方法不需要您的步骤ID。
然而，
我们可以通过假设步骤正确来简化此过程。我们可以使用nth-childCSS选择器来查找下一步，并将其与步骤数进行比较，以查看是否应再次显示“ Next Tutorial”按钮。
与第一种方法一样，步骤ID并未实际使用。
var stepNumber = 1;
$(function(){
$('p.step:nth-child(' + stepNumber + ')').show();
$('#nextstep').click(function(){
$('p.step:nth-child(' + stepNumber++ + ')').fadeOut();
$('p.step:nth-child(' + stepNumber + ')').fadeIn();
if(stepNumber == $('p.step').length) {
$('#nextstep').hide();
$('#nexttut').show();
}
});
});.step, #nexttut {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="text1" class="step">Step one goes here</p>
<p id="text2" class="step">Step two goes here</p>
<p id="text3" class="step">Step three goes here</p>
<p id="nextstep"><a href="#">Next Step</a></p>
<p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p>
</div>在这两种情况下，我都为这些步骤提供了一个通用的CSS类，以便可以在Javascript中轻松识别它们。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句