jquery - 制作选项卡的最佳不显眼且轻量级的 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

如果更改您的 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>