CODEWITHSUNDEEP
jquerycssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152875

What is the best unobtrusive and lightweight jquery solution to make tab?

Which is the best unobtrusive and lightweight jquery solution to make tab? Although Jquery similar to jquery ui. jquery ui tab is good but it's overkill fro for just tab. we will have to add jquery ui core.js, jquery ui tab.js then a little code snippet.

I need lightweight solution. using this type HTML. and jquery code should be in no.conflict mode.

<ul>
        <li><a href="#example-1">example 1</a></li>
        <li><a href="#example-2">example 2</a></li>
        <li><a href="#example-3">example 3</a></li>
</ul>
    <div id="tabs-1">
        <p>
            tab 1 content</p>
    </div>
    <div id="tabs-2">
        <p>
            tab 2 content</p>
    </div>
    <div id="tabs-3">
        <p>
            tab 3 content</p>
    </div>

tabs content should be accessible if js is disabled.

Upvotes: 1

Views: 1089

Answers (3)

Ultrasaurus
Ultrasaurus

Reputation: 3169

AccessibleTabs is a lovely unobtrusive tab implementation -- and accessible too!

Their simple example looks like this

$(document).ready(function(){
        $(".tabs").accessibleTabs({
            tabhead:'h2',
            fx:"fadeIn"
        });
});

You can configure the DOM elements that hold the tab labels and content to be anything you want.

on github here: https://github.com/ginader/Accessible-Tabs

more detail here: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php

Upvotes: 0

Michael Tucker
Michael Tucker

Reputation: 143

Jitendra's link to Semantic Tab Box v2.0 is no longer viable. The article can still be accessed with the Wayback Machine, however.

Most recent snapshot: http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/2007/semantic-tab-box-v20/

Direct link to example source code: http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/pages/examples/tabbox2/tabbox2.zip

Upvotes: 1

ahsteele
ahsteele

Reputation: 26514

If changing your HTML is an option you'd be better off with going something a bit more semantic. Having semantic markup for your tabs will result in better search engine optimization and make your site more accessible to a wider range of users. That said a Semantic Tabs with jQuery is a great plugin that will work with the below markup.

<div id="mytabset">
  <div class="panel">
    <h3>Tab1</h3>
     Panel stuff 1
  </div>
  <div class="panel">
    <h3>Tab2</h3>
     Panel stuff 2
  </div>
  <div class="panel">
    <h3>Tab3</h3>
     Panel stuff 3
  </div>
</div>

Upvotes: 1

Related Questions