<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="panel panel-body" style="min-height:256px">
<div class="col-md-3" id="mypartialviewdiv">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Steps to Approve Plans</h4>
</div>
<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"><a list-link="2" id="myreflink" href="/User/BindGrids?type=1" class="btn btn-primary btn-block">Step 2: P&L Details</a></li><li data-index="2" id="listitem" class="list-group-item"><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"><a list-link="4" id="myreflink" href="/User/ApprovalPlans?type=1&approve=2" class="btn btn-primary btn-block">Step 4: Final Step</a></li></ul>
</div>
</div>
<a id="mynextlink" class="nextspan">Next</a>
<style>
.nextspan {
font-size: 22px;
}</style>
<script>
$(document).ready(function () {
function PopulateLi() {
var jsonData = JSON.stringify({
//'PlanId': PlanId,
//'CompanyId': CompanyId
});
$.ajax({
type: "Get",
url: "/User/getmenus",
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: jsonData,
success: function (data) {
//var s = '<option value="-1">Please Select Category</option>';
var s = "";
var j = 1;
for (var i = 0; i < data.length; i++) {
s += '<li data-index="' + i +'" id="listitem" class="list-group-item"><a list-link="' + j + '" id="myreflink" href= "' + data[i].Link + '" class="btn btn-primary btn-block">' + data[i].LinkName + '</a></li>';
j++;
}
$("#gallery").html(s);
$(document).ready(function () {
$('.panel').on('click', '.list-group li', liClicked);
});
function liClicked(event) {
if ($(event.currentTarget).data('index') != data.length) {
$('.selectedul li').eq($(event.currentTarget).data('index') + 1).addClass('disabledClass') // This can be done in loop for all the following li's. This will just disable the immediate li. But you get the idea.
}
}
},
error: function (msg) {
}
});
}
});
</script>
Я хочу, чтобы следующая кнопка выше могла переходить к следующей ссылке li при нажатии. Так как я новичок в этом, мне нужна помощь относительно того, как этого добиться. Будем признательны за хорошие ответы. не могу понять, как это получить. Я реализовал код в этой ссылке на скрипач https://jsfiddle.net/60y8Lqcu/ Помогите мне с решением