Home › Forums › JavaScript › tabs like css-tricks snippet
- This topic is empty.
-
AuthorPosts
-
January 19, 2018 at 6:45 am #265700wincParticipant
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?January 19, 2018 at 7:11 am #265702ShikkedielParticipantSince the page itself doesn’t change, my guess is that it’s been done by manipulating
window.history
…January 19, 2018 at 7:25 am #265705wincParticipantIt 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..January 19, 2018 at 8:13 am #265706Paulie_DMemberNo. it’s a really a standard vertical menu with a long submenu for each item.
Just inspect the HTML…
Not terribly complicated.
January 19, 2018 at 8:16 am #265707ShikkedielParticipantThe web address also changes according to the chosen item though…
January 19, 2018 at 8:27 am #265708wincParticipantThat’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/January 19, 2018 at 8:42 am #265710Paulie_DMemberThe web address also changes according to the chosen item though…
Yeah…because it’s a different page…with the same layout/styling.
January 19, 2018 at 9:05 am #265714ShikkedielParticipantI 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 itshref
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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.