html JQuery检查是否单击了链接,但不工作

o2gm4chl  于 2022-12-09  发布在  jQuery
关注(0)|答案(2)|浏览(707)

我有一个 Bootstrap 分页。我想如果一个页面被点击只是得到一个红色的背景和停留。以显示哪个页面是当前活动的。问题是当页面重新加载后,点击,背景不保持和消失。如何解决这个问题?
这段代码对其他元素都很好,除了链接和按钮,这意味着问题只是重新加载,我需要重新加载。我在JS中放了一个警告只是为了测试。
我不希望所有的链接访问后得到背景色,它的分页和只有活动页面必须得到。
第一个

vjrehmav

vjrehmav1#

<ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Prev</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

这是你的解决方案。

$(document).ready(() => {
    let activePage = localStorage.getItem("activePage");

    if (activePage === "Prev") {
      $(".page-link").eq(0).addClass("active-page");
      localStorage.removeItem("activePage");
    } else if (activePage === "Next") {
      $(".page-link")
        .eq($(".page-link").length - 1)
        .addClass("active-page");
      localStorage.removeItem("activePage");
    } else if (activePage === null) {
    } else {
      $(".page-link").eq(activePage).addClass("active-page");
      localStorage.removeItem("activePage");
    }

    $(".page-link").on("click", function () {
        $(this).addClass("active-page");
        localStorage.setItem("activePage", $(this).text());
    });
});
yqhsw0fo

yqhsw0fo2#

如果你想在一个文件中找到一个新的文件,那么你可以在这里找到一个新的文件。

if (activePage) {
      $(".page-link")
        .eq(activePage - 1)
        .addClass("active-page");
      localStorage.removeItem("activePage");
    }

    $(".page-link").on("click", function () {
      $(this).addClass("active-page");
      localStorage.setItem("activePage", $(this).text());
    });

});

相关问题