Hash Tabs

Hash Tabs is a ultimate jQuery tab plugin forhash-sensitive,WAI-ARIA-complianttabs

Features

• Hash-friendly URLs, so your states are saved. Try refreshing!
• Compatible with IE8 and up
• Customizable and configurable. Use custom selectors for your tabs. Default uses nav and sectionelements
• noscript-friendly. Works very will in non-javascript browsers. When tabs can't be loaded, content feels like normal, as hashes are supported natively by the browser.
• Customizable SASS styles, ready to go with my sass boilerplate
• Bootstrap-free! But you can still use bootstrap if you really want to

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: srsgores.github.io

1. INCLUDE JS FILES

<link rel="stylesheet" href="css/jquery.hash-tabs.css">
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/hash-tabs/dist/jquery.hash-tabs.min.js"></script>

2. HTML

<div class="example1">
	<article class="tab-container">
		<nav class="tab-nav">
			<li><a href="#tab1" title="Tab 1">Tab 1</a></li>
			<li><a href="#tab2" title="Tab 2">Tab 2</a></li>
			<li><a href="#tab3" title="Tab 3">Tab 3</a></li>
			<li><a href="#tab4" title="Tab 4">Tab 4</a></li>
		</nav>
		<div class="tab-pane-container">
			<section id="tab1">
				<header><h1>Tab 1</h1></header>
				<p>This is content for tab 1</p>
			</section>
			<section id="tab2">
				<header><h1>Tab 2</h1></header>
				<p>This is content for tab 2</p>
			</section>
			<section id="tab3">
				<header><h1>Tab 3</h1></header>
				<p>This is content for tab 3</p>
			</section>
			<section id="tab4">
				<header><h1>Tab 4</h1></header>
				<p>This is content for tab 4</p>
			</section>
		</div>
	</article>
</div>

3. JAVASCRIPT

$example1 = $(".example1").hashTabs();

4. OPTIONS

Declare options in an object literal like so:

jQuery(document).ready(function() {
    var $tabs = $(".tab-container").hashTabs({
        debug: true,
        keyboard: true
        // other options here
    });
});

5. API

Trigger A Given Tab

(AKA trigger tab by id)

$(".myTabs").hashTabs("triggerTab", "chocolates") // triggers tab with id #chocolates

Trigger A Given Tab by Index

$(".myTabs").hashTabs("triggerTabByIndex", 1) // triggers second tab (with index 1) in tab set

Trigger Next Tab (to Right)

$(".myTabs").hashTabs("selectNext") // triggers right-most tab to current tab

Trigger Previous Tab (to Left)

$(".myTabs").hashTabs("selectPrevious") // triggers left-most tab to current tab