javascript - 在引导分页中设置和取消设置活动类
问题描述
我有一些 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 - 在 JavaScript 中将数据动态写入嵌套对象
- amazon-web-services - 如何使用 AWS CLI 查找与 ec2 关联的辅助私有 IPv4 地址是什么?
- python - 使用 Python 查找 JSON 中特定部分的值
- python-3.x - 为什么 Python 的第三个包默认安装在与 Python 在 Windows 上的安装不同的目录中?
- asp.net-core - 如何将 pdf 文件传递给需要 IFormFile 的控制器
- apache-storm - 在 Apache Storm 中的 python bolt 中勾选元组
- html - 元素验证
错误- 元素
- c# - 使用 C# 在每页上打印多个 pdf 页面
- mysql - 如何在使用 mysql 映像的谷歌云构建中运行 gradle 集成测试?
- react-native - 禁用 tabPress react-navigation/material-top-tabs