Какое лучшее ненавязчивое и легкое решение jquery для создания вкладок?

Question

Какое самое лучшее ненавязчивое и легкое решение jquery для создания вкладок? Хотя Jquery похож на JQuery UI. JQuery UI Tab хорошо, но это просто из-за просто Tab. нам нужно будет добавить jquery ui core.js, jquery ui tab.js и небольшой фрагмент кода.

Мне нужно легкое решение. используя этот тип HTML. и jquery код должен быть в режиме no.conflict .

<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>

Содержание вкладок должно быть доступно, если js отключен.

Answer 1

Ссылка Jitendra на Semantic Tab Box v2.0 больше не жизнеспособна. Однако к статье все еще можно получить доступ с Wayback Machine.

Самый последний снимок: http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/2007/semantic-tab-box-v20/

Прямая ссылка на пример исходного кода: http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/pages/examples/tabbox2/tabbox2.zip

Answer 2

Если вы хотите изменить HTML-код, вам будет лучше заняться чем-нибудь более семантическим. Наличие семантической разметки для ваших вкладок приведет к лучшей поисковой оптимизации и сделает ваш сайт более доступным для более широкого круга пользователей. При этом Semantic Tabs с jQuery - отличный плагин, который будет работать с разметкой ниже.

<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>

Answer 3

AccessibleTabs - прекрасная ненавязчивая реализация вкладок - и доступная тоже!

Их простой пример выглядит так

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

Вы можете настроить элементы DOM, которые содержат ярлыки вкладок и содержимое, на все, что вам нужно.

на github здесь: https://github.com/ginader/Accessible-Tabs

подробнее здесь: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php