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

如果更改HTML是一个选项，那么你可以更好地使用更多语义的东西。为您的标签添加语义标记将带来更好的搜索引擎优化，并使您的网站更容易被更广泛的用户访问。这就是说Semantic Tabs with 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 2

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

制作标签的最佳不显眼且轻量级的jquery解决方案是什么？

3 个答案: