Changing tabs refreshes page and goes to default tab

Design help General
1

Hello,

I’m trying to build a library with the CMS feature. I have loaded up tabs with the library content. However now when I go to the site and change tab, then click to the next page, the page refreshes and goes back to the default tab. I’m having a lot of trouble finding the correct words to google this problem. I would like it if the page did not refresh and it would simply go to the next page in the tab. Please access this link, click to Information Architecture, then to the next page to see what I mean.

https://www.readycert.net/certification

One thing I have tried is this…

But it still goes back to the default tab not the “active tab” … i’m sure i’m just missing something very simple.

Again I want it to either not refresh, or remember what tab I was on after the refresh.

2

thanks for all the help

3

That is normal behavior. Look at the URL when you visit a tab. It is the page URL. When you follow a link and then “Go Back” you are returning to that URL.

Custom code …
The only way to pull this off would be when a tab is clicked , record the active tab ID to browser storage. When the page loads you check to see that value exists, if true; trigger the opening of the tab. If not, do nothing. Not a coder? Hire. Not worth it? Put up with the default behavior.

4

@webdev, I’m having this issue as well. However, I don’t think this is normal as it is not the result of using the back/return button in the browser.

If you follow these steps below, you’ll see what I (and Zain, too) am experiencing:

  1. Compositions where it defaults to the OFFICIAL CATALOG.
  2. Click the ENTIRE CATALOG tab.
  3. Scroll to the bottom, and click Next.

You’ll see that the tab has switched back to the OFFICIAL CATALOG tab. If you click the ENTIRE CATALOG tab again, it does reflect the next page. But I would expect that when clicking the next page, the tab would not change. I do see that the URL changes, which refreshes the page but I’m wondering why something isn’t set via Webflow that remembers which tab is “active”?

5

I have a custom code solution. Paste it into your pages or websites before body tag. It overrides webflows native pagination rules. I use it inside a Tabs section where I have paginated CMS lists under each tab. Dont forget to add script tags before and after the code:

`
document.addEventListener(‘DOMContentLoaded’, function() {
const tabsContent = document.querySelector(‘.w-tab-content’);
const tabLinks = document.querySelectorAll(‘.w-tab-link’);
let currentTab = tabLinks[0].getAttribute(‘data-w-tab’);
let cachedContent = {};

function debug(message) {
console.log([DEBUG]: ${message});
}

function captureAllPaginationClicks() {
debug(‘Capturing all pagination clicks’);
document.addEventListener(‘click’, function(e) {
const paginationLink = e.target.closest(‘.w-pagination-wrapper a’);
if (paginationLink) {
e.preventDefault();
e.stopPropagation();
handlePaginationClick(e, paginationLink);
}
}, true); // Use capture phase
}

async function handlePaginationClick(e, link) {
debug(Pagination click detected);

const url = new URL(link.href, window.location.origin);
const pageParam = link.getAttribute('data-page') || url.searchParams.get('page');
if (pageParam) {
  url.searchParams.set('page', pageParam);
}

const cleanUrl = url.toString();
debug(`Clean URL for pagination: ${cleanUrl}`);

showLoadingIndicator();

try {
  await fetchAndCachePage(cleanUrl, currentTab);
  updateContent(cleanUrl);
} catch (error) {
  debug(`Error during pagination: ${error}`);
} finally {
  hideLoadingIndicator();
}

}

async function fetchAndCachePage(url, tabId) {
debug(Fetching and caching: ${url} for tab: ${tabId});
try {
const response = await fetch(url);
const text = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(text, ‘text/html’);

  const content = doc.querySelector(`.w-tab-pane[data-w-tab="${tabId}"] .w-dyn-items`);
  const pagination = doc.querySelector(`.w-tab-pane[data-w-tab="${tabId}"] .w-pagination-wrapper`);
  
  if (content) {
    if (!cachedContent[url]) cachedContent[url] = {};
    cachedContent[url][tabId] = {
      content: content.innerHTML,
      pagination: pagination ? pagination.outerHTML : ''
    };
    debug(`Cache updated for: ${url}, tab: ${tabId}`);
  } else {
    debug(`Content not found for tab: ${tabId}`);
  }
} catch (error) {
  debug(`Error fetching page: ${error}`);
}

}

function updateContent(url) {
debug(Updating content for tab: ${currentTab});
const activePane = tabsContent.querySelector(.w-tab-pane[data-w-tab="${currentTab}"]);
if (!activePane) {
debug(Active pane not found for tab: ${currentTab});
return;
}
const contentContainer = activePane.querySelector(‘.w-dyn-items’);
let paginationContainer = activePane.querySelector(‘.w-pagination-wrapper’);

if (cachedContent[url] && cachedContent[url][currentTab]) {
  contentContainer.innerHTML = cachedContent[url][currentTab].content;
  if (paginationContainer) {
    paginationContainer.outerHTML = cachedContent[url][currentTab].pagination;
  } else if (cachedContent[url][currentTab].pagination) {
    contentContainer.insertAdjacentHTML('afterend', cachedContent[url][currentTab].pagination);
  }
  debug(`Content updated for tab: ${currentTab}`);
} else {
  debug(`No cached content found for tab: ${currentTab}`);
}

}

function showLoadingIndicator() {
const activePane = tabsContent.querySelector(.w-tab-pane[data-w-tab="${currentTab}"]);
const contentContainer = activePane.querySelector(‘.w-dyn-items’);
contentContainer.style.opacity = ‘0.5’;
}

function hideLoadingIndicator() {
const activePane = tabsContent.querySelector(.w-tab-pane[data-w-tab="${currentTab}"]);
const contentContainer = activePane.querySelector(‘.w-dyn-items’);
contentContainer.style.opacity = ‘1’;
}

tabLinks.forEach(link => {
link.addEventListener(‘click’, function() {
currentTab = this.getAttribute(‘data-w-tab’);
debug(Tab changed to: ${currentTab});
});
});

function initializePagination() {
debug(‘Initializing pagination script’);
captureAllPaginationClicks();
fetchAndCachePage(window.location.href, currentTab)
.then(() => {
debug(‘Initial content cached’);
})
.catch(error => {
debug(Error during initialization: ${error});
});
}

// Initialize immediately and after a short delay
initializePagination();
setTimeout(initializePagination, 1000);

// Mutation Observer to detect when tabs are fully loaded
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === ‘childList’ && mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains(‘w-tab-pane’)) {
debug(‘Tab content loaded, reinitializing pagination’);
initializePagination();
}
});
}
});
});

observer.observe(tabsContent, { childList: true, subtree: true });
});