Member Avatar for Jon_7

I have 3 tabs on this page that I'm trying to target with 3 distinct direct links. Is it possible to have a script read an appended URL to remove/add the necessary active class to achieve the results I'm attempting to achieve. Any other suggestions would be great as well.

PS I'm not great at coding, but I'll try my hardest. Thanks!

  • 3 Contributors
  • 2 Replies
  • 417 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by jstfsklh211

Dani AI

Generated

Two practical, reliable patterns for direct-linkable tabs are: (1) hash fragments (simple, no server changes), and (2) the History API/pushState (cleaner URLs and better back/forward support). ’s idea of “read the URL” maps directly to the hash approach below; ’s History API suggestion is useful when back-button behavior and prettier URLs are required.

A compact hash-fragment solution (no server work needed). Markup expectation: nav links like <a href="#tab1"> and panels with matching ids and classes .tabs-nav / .tab-panel. On load and on hashchange, toggle the active class and ARIA state:

function activateTab(id) {
  var nav = document.querySelectorAll('.tabs-nav a');
  var panels = document.querySelectorAll('.tab-panel');
  Array.prototype.forEach.call(nav, function(link){
    var match = link.getAttribute('href') === '#'+id;
    link.classList.toggle('active', match);
    link.setAttribute('aria-selected', match ? 'true' : 'false');
  });
  Array.prototype.forEach.call(panels, function(p){
    p.style.display = (p.id === id) ? '' : 'none';
    p.setAttribute('aria-hidden', p.id === id ? 'false' : 'true');
  });
}
window.addEventListener('DOMContentLoaded', function(){
  activateTab(location.hash ? location.hash.slice(1) : 'tab1');
});
window.addEventListener('hashchange', function(){ activateTab(location.hash.slice(1)); });

If pushState is preferred, push a query or state object when a tab is clicked and handle popstate. Use query strings (e.g. ?tab=tab2) to avoid server rewrite rules, or configure server-side routing if using path-style URLs. Example pattern: intercept clicks, call history.pushState({tab:id}, '', '?tab='+id), and respond to popstate by activating the tab from state or URLSearchParams.

Accessibility and troubleshooting notes: keep real hrefs so non-JS users still reach content; update aria-selected and aria-hidden; move focus into the active panel for keyboard users; ensure CSS targets both the nav link .active and the visible panel. If direct links return 404 after using pushState with pretty paths, revert to hashes or add a server rewrite to serve the same page. This complements the earlier replies and gives both a minimal, robust option (hash) and a more polished option (History API) depending on deployment constraints.

Recommended Answers

All 2 Replies

Member Avatar for gentlemedia

I have another suggestion and that is using the HTML5 History API (pushState and AJAX) for this. This will also work with the browser back button and you don't get all this content in one document unlike your tab implementation.

Here's a little tut and example demo:
https://css-tricks.com/using-the-html5-history-api/

Edited by gentlemedia
Member Avatar for jstfsklh211

you can use the document.location.href to look up the url and then append the new class to the appropriate element
add distinct classes or ids to your tabs to make then easy to find

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.