Create Bookmarkable Tabs (Deeplinking)

In this tutorials we are going to create bookmarkable tabs with deeplinking so we can have more SEO friendly urls and open tabs from the page link. We have full control over tab id which will be displayed in the urls. The tab id will be specified in the data-link attribute of each li tag. After that we need to change the defaultTab option to one of the tabs we specified because the defaultTab is ‘tab1′ by default.

The HTML

Below the HTML structure for Zozo Tabs. We have added the data-link attribute for each tab so we can open this tab directly from an internal link or an external link.  Notice that the last tab purchase contains a direct link to another website. We do need to add any content for this tab. We add the website address in href of the a tag as showing below in the example.

The jQuery Code

The jQuery activation code will be the same like normal Zozo Tabs with a few changes which is: deeplinking: true and defaultTab: “themes” as showing below.

Internal and External Linking

Below showing two examples how to link to a specific tab internally within the your page and also externally from another website.

This code is from basic deeplinking example and contains in examples folder. The examples folder also contains an advanced example of deeplinking using deeplinkingPrefix and deeplinkingSeparator for advanced deeplinking.

Please note: if your using older version zozo tabs, you need also the enable manualTabId:true as well.

Documentation reference:
http://docs.zozoui.com/tabs/#options#deeplinking

One Comment

  1. Cheshire

    If the tabs jQuery resides in a common footer but you want different tabs on different pages, you can use a variable for the defaultTab. Just assign the variable in the file that contains your tabbed content using:

    $foo = “bar”
    [replace “foo” with whatever you want and “bar” with the data-link value of the tab you want as the default]

    Then in your jQuery call in the footer, use

    $(“#tabbed-nav”).zozoTabs({
    defaultTab: $foo
    });

Leave A Comment?