tabs like css-tricks snippet

[winc]

Hi.
How i can do tabs like this: https://css-tricks.com/snippets/html/
I mean changing url (without hash).
It’s possible to do it with jquery tabs?

[Shikkediel]

Since the page itself doesn’t change, my guess is that it’s been done by manipulating window.history…

https://css-tricks.com/using-the-html5-history-api/

[winc]

It was example. There are something like vertical tabs (HTML, CSS, Sass, etc.) without # char in links and url.
I think it’s clear. Maybe it was made using history.pushState..

[Paulie_D]

No. it’s a really a standard vertical menu with a long submenu for each item.

Just inspect the HTML…

Not terribly complicated.

[Shikkediel]

The web address also changes according to the chosen item though…

[winc]

That’s what I mean exactly and I wants to get. Sorry, but my english may be cause of the misunderstanding.

I inspect code it and almost got it, but when I enter url with some tab name i gets only 404 error. I think it isn’t only js, but also php..

i.e.:
https://css-tricks.com/snippets/htaccess/
https://css-tricks.com/snippets/jquery/

[Paulie_D]

The web address also changes according to the chosen item though…

Yeah…because it’s a different page…with the same layout/styling.

[Shikkediel]

I don’t think the page is redirected, Paulie:

function(s) {

  s.preventDefault();

  var e = $(this),
    t = e.find("a");

  if (snippetsTopNavLinks.removeClass("active"), t.addClass("active"), newClass = e.text(), listOfSnippets.removeClass(curClass).addClass(newClass), curClass = newClass, localStorage.setItem("snippetType", e.attr("id")), $(window).width() < 600) {
    var i = $("#list-of-snippets").position();
    window.scrollTo(0, i.top)
  }

  history.replaceState("", "", t.attr("href")), document.title = newClass + " | CSS-Tricks"
}

It prevents the default action of the link inside the li item and uses its href attribute to adapt the url without a page refresh…

Edit – please post any code you have, winc. Can’t debug a hypothetical. I doubt PHP or htaccess would be needed.

[Author]

Posts