我希望该用户在单击下一步按钮时自动重定向到下一个 li

Question

$(document).ready(function() {
$('#mynextlink').on('click', function() {
debugger;
//var linkss = $('.selectedul li').next('.selectedul li').find('a').attr('href');
var linkss = $('.selectedul li').parent().prev().find('a');
$('#mynextlink').attr("href", linkss);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel-body" id="social">
<ul id="gallery" class="list-group selectedul">
<li data-index="0" id="listitem" class="list-group-item  "><a list-link="1" id="myreflink" href="/User/BusinessPlanSummary" class="btn btn-primary btn-block">Step 1: Business Plan Summary</a></li>
<li data-index="1" id="listitem" class="list-group-item disabledClass "><a list-link="2" id="myreflink" href="/User/BindGrids?type=1" class="btn btn-primary btn-block">Step 2: P&amp;L Details</a></li>
<li data-index="2" id="listitem" class="list-group-item disabledClass "><a list-link="3" id="myreflink" href="/User/BindGrids?type=2" class="btn btn-primary btn-block">Step 3: Balance Sheet Details</a></li>
<li data-index="3" id="listitem" class="list-group-item disabledClass "><a list-link="4" id="myreflink" href="/User/ApprovalPlans?type=1&amp;approve=2" class="btn btn-primary btn-block">Step 4: Final Step</a></li>
</ul>
</div>
<a id="mynextlink" class="nextspan">Next</a>

以上是我的代码。我的要求是，当单击"下一步"按钮时，用户将自动切换到下一个li元素。我已经尝试了下面的jquery中的代码，但找不到任何解决方案。

Answer 1

在第一个 li 中使用类activeli，并在每次单击时更改它。请尝试以下代码。希望它能奏效。

.HTML

<div class="panel-body" id="social">
<ul id="gallery" class="list-group selectedul">
<li data-index="0" id="listitem" class="list-group-item  activeli"><a list-link="1" id="myreflink" href="/User/BusinessPlanSummary" class="btn btn-primary btn-block">Step 1: Business Plan Summary</a></li><li data-index="1" id="listitem" class="list-group-item disabledClass "><a list-link="2" id="myreflink" href="/User/BindGrids?type=1" class="btn btn-primary btn-block">Step 2: P&amp;L Details</a></li><li data-index="2" id="listitem" class="list-group-item disabledClass "><a list-link="3" id="myreflink" href="/User/BindGrids?type=2" class="btn btn-primary btn-block">Step 3: Balance Sheet Details</a></li><li data-index="3" id="listitem" class="list-group-item disabledClass "><a list-link="4" id="myreflink" href="/User/ApprovalPlans?type=1&amp;approve=2" class="btn btn-primary btn-block">Step 4: Final Step</a></li></ul>
</div>
<a id="mynextlink" class="nextspan">Next</a>

jquery

$('#mynextlink').on('click', function () {
var $next;
var $selected = $(".activeli");
$next = $selected.next('li');
$next = $selected.next('li');
$selected.removeClass("disabledClass activeli");
$('.selectedul li').addClass('disabledClass');
$next.addClass('activeli');
$next.removeClass('disabledClass');
window.location.href = $('.activeli').find("a").attr('href');
});