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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!-- The main wrapper should have an id which is required, otherwise it will appear as undefined --> <div id="tabbed-nav"> <!-- Tab Navigation Menu, to have seo friendly hashtags, add data-link attribute to each li tag and give it a unique id to apear in the url--> <ul> <li data-link="overview"><a>Overview</a></li> <li data-link="features"><a>Features</a></li> <li data-link="docs"><a>Documentation</a></li> <li data-link="themes"><a>Themes</a></li> <li data-link="purchase"><a href="http://codecanyon.net/item/zozo-tabs/3327836?ref=ZozoUI" target="_blank">Purchase</a></li> </ul> <!-- Content container --> <div> <!-- Overview --> <div> <h4>Overview</h4> </div> <!-- Features --> <div> <h4>Features</h4> </div> <!-- Docs --> <div> <h4>Docs</h4> </div> <!-- Themes --> <div> <h4>Themes</h4> </div> <!-- Purchase --> <div> <!-- this empty div is necessary for external linking, no need for content here --> </div> </div> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> jQuery(document).ready(function ($) { /* jQuery activation and setting options for the tabs, also setting the the following: - deeplinking: enabled - defaultTab: change it to one the new tab id*/ $("#tabbed-nav").zozoTabs({ theme: "white", position: "top-left", orientation: "horizontal", deeplinking: true, defaultTab: "themes" }); }); </script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="internal-linking"> <h4>Go to a tab by clicking the external-links: </h4> <p> <a href="#overview">Overview</a> <a href="#features">Features</a> <a href="#docs">Docs</a> <a href="#themes">Themes</a> </p> </div> <div id="external-linking"> <h4>Go to a tab by clicking the external-links: </h4> <p> <a href="http://example.com/yourpage.html#overview">Overview</a> <a href="http://example.com/yourpage.html#features">Features</a> <a href="http://example.com/yourpage.html#docs">Docs</a> <a href="http://example.com/yourpage.html#themes">Themes</a> </p> </div> |
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
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
});