带有面包屑的箭头按钮（上一个和下一个）

Question

我正在尝试构建箭头按钮来导航到下一页和上一页，并使用面包屑路径向用户显示他们所在的页面。我似乎无法弄清楚。我遇到的问题是箭头按钮无法正常工作。下一个按钮只会转到第 2 页，而不是第 3 页或第 4 页。上一个按钮根本不起作用，面包屑不会显示您转到的页面。

我尝试了这个，它似乎有效，但我的箭头会随着此代码消失：

const previousButton = document.querySelector(".arrow-button.previous");
const nextButton = document.querySelector(".arrow-button.next");
const breadcrumbs = document.querySelector(".breadcrumbs");

// Initial state (assuming you start on the first page)
let currentPage = 1;
const maxPages = 5; // Adjust this based on your actual number of pages

// Update breadcrumbs based on current page
function updateBreadcrumbs() {
breadcrumbs.innerHTML = ""; // Clear existing breadcrumbs

for (let i = 1; i <= currentPage; i++) {
const listItem = document.createElement("li");
const link = document.createElement("a");
link.textContent = `Page ${i}`; // Customize link text if needed
link.href = `#page-${i}`; // Set appropriate links for your pages

if (i === currentPage) {
  listItem.classList.add("active"); // Mark current page as active
  link.removeAttribute("href"); // Remove link for current page
}

listItem.appendChild(link);
breadcrumbs.appendChild(listItem);

 }
}

// Handle previous button click
previousButton.addEventListener("click", () => {
if (currentPage > 1) {
currentPage--;
updateBreadcrumbs();
// Handle page content transition here (e.g., using AJAX or DOM manipulation)
console.log(`Switched to page ${currentPage}`); // For demonstration purposes
}

// Disable previous button if on the first page
previousButton.disable = currentPage === 1;
});

// Handle next button click
nextButton.addEventListener("click", () => {
if (currentPage < maxPages) {
currentPage++;
updateBreadcrumbs();
// Handle page content transition here
console.log(`Switched to page ${currentPage}`);
 }

// Disable next button if on the last page
nextButton.disabled = currentPage === maxPages;
});

// Update breadcrumbs initially
updateBreadcrumbs();

我也尝试过这个：

const previousButton = document.querySelector(".left-arrow");
const nextButton = document.querySelector(".right-arrow");
const breadcrumbs = document.querySelector(".breadcrumbsDisplay");

 // Initial state (assuming you start on the first page)
let currentPage = 1;
const maxPages = 4; // Adjust this based on your actual number of pages
const pages = [
{ text: 'Home |', href: './index1.html' },
{ text: 'About |', href: './index2.html' },
{ text: 'Portfolio |', href: './index3.html' },
{ text: 'Contact |', href: './index4.html' },
]
// Handle previous button click
previousButton.addEventListener("click", () => {
if (currentPage > 1) {
currentPage--;
updateBreadcrumbs();
window.location.href = pages[currentPage-1].href;
}
 previousButton.disabled = currentPage === 1;
});

// Handle next button click
nextButton.addEventListener("click", () => {
if (currentPage < maxPages) {
currentPage++;
updateBreadcrumbs();
window.location.href = pages[currentPage-1].href;
}
nextButton.disabled = currentPage === maxPages;
});
// Update breadcrumbs based on current page
function updateBreadcrumbs() {
breadcrumbs.innerHTML = ""; // Clear existing breadcrumbs

for (let i = 1; i <= maxPages; i++) { // Change this line
const listItem = document.createElement("li");
const link = document.createElement("a");
listItem.classList.add("breadcrumb-item");
link.textContent = pages[i-1].text;
link.href = pages[i-1].href;

if (i === currentPage) {
  listItem.classList.add("active"); // Mark current page as active
  link.removeAttribute("href"); // Remove link for current page
}

listItem.appendChild(link);
breadcrumbs.appendChild(listItem);
 }
}

// Initial setup
updateBreadcrumbs();
previousButton.disabled = currentPage === 1;
nextButton.disabled = currentPage === maxPages;

Answer 1

你的第一个例子几乎是正确的。只需在单击下一个或上一个时检查按钮的禁用状态，因此我将该代码添加到

updateBreadcrumbs

函数中。

const previousButton = document.querySelector(".arrow-button.previous");
const nextButton = document.querySelector(".arrow-button.next");
const breadcrumbs = document.querySelector(".breadcrumbs");

// Initial state (assuming you start on the first page)
let currentPage = 1;
const maxPages = 5; // Adjust this based on your actual number of pages

// Update breadcrumbs based on current page
function updateBreadcrumbs() {
  breadcrumbs.innerHTML = ""; // Clear existing breadcrumbs

  for (let i = 1; i <= currentPage; i++) {
    const listItem = document.createElement("li");
    const link = document.createElement("a");
    link.textContent = `Page ${i}`; // Customize link text if needed
    link.href = `#page-${i}`; // Set appropriate links for your pages

    if (i === currentPage) {
      listItem.classList.add("active"); // Mark current page as active
      link.removeAttribute("href"); // Remove link for current page
    }

    listItem.appendChild(link);
    breadcrumbs.appendChild(listItem);

  }

  // Disable previous button if on the first page
  previousButton.disabled = currentPage === 1;
  // Disable next button if on the last page
  nextButton.disabled = currentPage === maxPages;
}

// Handle previous button click
previousButton.addEventListener("click", () => {
  if (currentPage > 1) {
    currentPage--;
    updateBreadcrumbs();
    // Handle page content transition here (e.g., using AJAX or DOM manipulation)
    console.log(`Switched to page ${currentPage}`); // For demonstration purposes
  }


});

// Handle next button click
nextButton.addEventListener("click", () => {
  if (currentPage < maxPages) {
    currentPage++;
    updateBreadcrumbs();

    // Handle page content transition here
    console.log(`Switched to page ${currentPage}`);
  }


});

// Update breadcrumbs initially
updateBreadcrumbs();

.active {
  background: yellow;
}

button[disabled] {
  background: grey;
}

<div class="breadcrumbs"></div>
<button class="arrow-button previous">previous</button>
<button class="arrow-button next">next</button>