Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; WP_MatchesMapRegex has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/class-wp.php on line 635
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Translation_Entry has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/pomo/entry.php on line 14
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_Reader has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/pomo/streams.php on line 12
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_FileReader has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/pomo/streams.php on line 106
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_StringReader has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/pomo/streams.php on line 150
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_CachedFileReader has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/pomo/streams.php on line 189
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; POMO_CachedIntFileReader has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/pomo/streams.php on line 204
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; WP_Widget_Factory has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/widgets.php on line 403
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/load.php on line 585
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; st_blog_widget has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-content/themes/supportdesk/framework/widgets/widget-blog.php on line 13
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; st_kb_articles_widget has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-content/themes/supportdesk/framework/widgets/widget-kb-articles.php on line 13
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; st_kb_categories_widget has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-content/themes/supportdesk/framework/widgets/widget-kb-categories.php on line 13
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; add_theme_button has a deprecated constructor in /customers/3/9/1/zozoui.com/httpd.www/support/wp-content/themes/supportdesk/framework/shortcodes/wysiwyg/wysiwyg.php on line 2
Create Bookmarkable Tabs (Deeplinking) – Support
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
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 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.
<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.
<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.
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Reply
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
});
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Leave A Comment?
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Click here to cancel reply.
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
Deprecated: Function get_magic_quotes_gpc() is deprecated in /customers/3/9/1/zozoui.com/httpd.www/support/wp-includes/formatting.php on line 3598
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
});