Forums

Give help. Get help.

  • # January 19, 2018 at 6:45 am

    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

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

    Using the HTML5 History API

    # January 19, 2018 at 7:25 am

    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..

    # January 19, 2018 at 8:13 am

    No. 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

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

    # January 19, 2018 at 8:27 am

    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.:

    HTAccess

    jQuery Code Snippets

    # January 19, 2018 at 8:42 am

    The 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

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag