我有一些Javascript可以处理我的导航栏上的点击。在大多数情况下，它都适用于禁用样式，该样式应为上一个下一个，第一个和最后一个按钮，这些按钮会将您带到正确的页面。由于某些原因，应用于活动样式的相同技术无法正常工作。理想情况下，除了当前页面按钮之外，我从不希望任何按钮显示为活动状态。无论我单击哪个按钮都将显示为活动状态，除非单击该页面，否则当前页面不会获得活动样式。在我的导航栏按钮上设置和取消激活的正确语法方面的任何帮助，将不胜感激。
var current_page;
var total_pages;
function fnPage_click(multiplyer) {
//make all buttons inactive and enabled
for (var i = 0; i < total_pages; i++)
$('#li' + i).removeClass("active");
$('#li.prev').removeClass("active");
$('#li.prev').removeClass("disabled");
$('#li.next').removeClass("active");
$('#li.next').removeClass("disabled");
$('#li.first').removeClass("active");
$('#li.last').removeClass("active");
$.ajax({
url: '/Home/Browsing?' + multiplyer,
type: 'POST',
error: function (xhr) {
alert('Error: ' + xhr.statusText);
},
success: function (result) {
$("#divLocGrid").html(result);
current_page = multiplyer;
switch (current_page) {
case 1: {
//Previous is disabled/inactive, First is inactive, the current_page is active
$("#li.prev").removeClass("active").addClass("disabled");
$("li.first").removeClass("active");
$('#li' + current_page).addClass("active");
break;
}
case total_pages: {
//Next is disabled/inactive, Last is inactive, the current_page is active
$('#li.next').removeClass("active").addClass("disabled");
$("li.last").removeClass("active");
$('#li' + current_page).addClass("active");
break;
}
default: {
//Previous and Next are enabled but inactive the current_page is active
$('#li.prev').removeClass("active");
$('#li.next').removeClass("active");
$('li' + current_page).addClass("active");
break;
}
}
},
async: true,
processData: false
});
}
function fnPrevNxt(strDir) {
var multiplyer;
if (strDir == 'Nxt') {
multiplyer = current_page + 1;
if (multiplyer > total_pages) {
$('#li.next').removeClass("active").addClass("disabled");
return;
}
}
else {
multiplyer = current_page - 1;
if (multiplyer < 1) {
$('#li.prev').removeClass("active").addClass("disabled");
return;
}
}
fnPage_click(multiplyer);
}
function fnOnNavBtnsLoad(model) {
total_pages = model;
fnPage_click(1);
}
<body onload="fnOnNavBtnsLoad(@Model)">
<div id="dvNavBtns">
<nav class="navbar navbar-expand-lg bg-gray-light navbar-dark" aria-label="Locations pages">
<ul id="ulNavBtns" class="pagination">
<li id="li.first" class="page-item">
<a href="javascript:void(0)" id="btnFirst" class="page-link" onclick="fnPage_click(1)">First</a>
</li>
<li id="li.prev" class="page-item">
<a href="javascript:void(0)" id="btnPrev" aria-label="<<" class="page-link" onclick="fnPrevNxt('Prev')">
<span aria-hidden="true">«</span>
</a>
</li>
@{int pages = Model;
int num = 0;
while (num < pages)
{
num++;
<li id="li" +@(num) class="page-item">
<a href="javascript:void(0)" aria-label=@num class="page-link" onclick="fnPage_click(@(num))">
@(num)
</a>
</li>
}
}
<li id="li.next" class="page-item">
<a href="javascript:void(0)" id="btnNxt" aria-label=">>" class="page-link" onclick="fnPrevNxt('Nxt')">
<span aria-hidden="true">»</span>
</a>
</li>
<li id="li.last" class="page-item">
<a href="javascript:void(0)" id="btnLast" class="page-link" onclick="fnPage_click(@Model)">Last</a>
</li>
</ul>
</nav>
</div>
最佳答案
它有点令人费解，但这是最终对我有用的语法。我必须遍历document.context.all元素集合才能找到该元素，然后从该元素的classList集合中添加或删除。
$(document).context.all['li.id'].classList.add("classname");
$(document).context.all['li.id'].classList.remove("classname");
关于javascript - 在引导分页中设置和取消事件类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51266654/