即使在页面刷新时也有活动的分页选项卡

Question

我想让这个分页选项卡在点击时处于活动状态，并且应该处于活动状态甚至刷新。就像我在刷新页面时选择了选项卡 3 一样，它应该在选项卡 3 上没有转到一个。我不打算在 HTML 中使用 onlClik 事件，我只想在 CSS 或 Javascript 中使用它。我用 Local Storage 尝试过，但无法完成。我认为这可以通过本地存储来完成。

<link rel="stylesheet" href="https://affiliation.iub.edu.pk/assets/bootstrap/css/bootstrap.min.css">
<div class="col-sm-7">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0">Previous</a>
</li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0">2</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0">3</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="4" tabindex="0">4</a></li>
<li class="paginate_button active "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="5" tabindex="0">5</a></li>
<li class="paginate_button disabled" id="DataTables_Table_0_ellipsis"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="6" tabindex="0">…</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="7" tabindex="0">20</a></li>
<li class="paginate_button next" id="DataTables_Table_0_next"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="8" tabindex="0">Next</a></li>
</ul>
</div>
</div>

Answer 1

是的，可以用 localStorage 完成。这是我的处理方式：-

const lastPage = localStorage.getItem('lastPage') || 1;
const lastPageElement = document.querySelector(`.paginate_button [data-dt-idx='${lastPage}']`);
lastPageElement.parentNode.classList.add('active');


const paginationFooter = document.querySelector('.pagination');
paginationFooter.addEventListener('click', (e) => {
  const isPage = e.target.dataset.dtIdx;
  if (isPage) {
    const currentActivePageElement = document.querySelector('.paginate_button.active');
    if (currentActivePageElement) currentActivePageElement.classList.remove('active');
    e.target.parentNode.classList.add('active');
    const currentPage = e.target.dataset.dtIdx;
    localStorage.setItem('lastPage', currentPage);
  }
})

<link rel="stylesheet" href="https://affiliation.iub.edu.pk/assets/bootstrap/css/bootstrap.min.css">
<div class="col-sm-7">
  <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
    <ul class="pagination">
      <li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
        <a href="#" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0">Previous</a>
      </li>
      <li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a></li>
      <li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0">2</a></li>
      <li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0">3</a></li>
      <li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="4" tabindex="0">4</a></li>
      <li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="5" tabindex="0">5</a></li>
      <li class="paginate_button disabled" id="DataTables_Table_0_ellipsis"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="6" tabindex="0">…</a></li>
      <li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="7" tabindex="0">20</a></li>
      <li class="paginate_button next" id="DataTables_Table_0_next"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="8" tabindex="0">Next</a></li>
    </ul>
  </div>
</div>

虽然也尝试包括您的方法，以便人们可以告诉您您可能错过了什么。这是一个 fiddle，您可以在其中查看工作情况。

即使在页面刷新时也有活动的分页选项卡

Active pagination tab even on page refresh

html

javascript

twitter-bootstrap-3