Javascript 带有选项卡导航的jquery选项卡

我想制作一个包含jquery选项卡的内容框，其中包含许多选项卡内容的选项卡导航，例如10多个选项卡内容。问题在于，jquery用户界面没有为大的标签号提供内置的标签导航，而谷歌代码中jquery插件的可滚动标签对于大约50多页的大容量页面来说速度非常慢，效率也很低。如果用户试图阅读第1页和第40页，则需要30秒以上的时间。导航以单击箭头

因此，我制作了一个选项卡内容框，其中只有5个选项卡，包括显示的选定选项卡，以及一个选择特定页面的输入文本框的选项卡导航，以及带有第一页和最后一页选项卡导航按钮的“下一页”和“上一页”。如果你把常规的jQueryUI标签放在超过20-30个标签上，就会弄乱外观和css

<div id="tabs" class="tabs-bottom">
<ul>
 <li><a href="#tabs-1">Nunc tincidunt</a>
    </li>
    <li><a href="#tabs-2">Proin dolor</a>
    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>
    </li>
</ul>
<ul class="TabbedPageNavi">
    <li>Page
        <input id="pageNumber" type="text" value="01" style="width:30px;" />
    </li>
    <li><a class="previous" href="#">&laquo;&nbsp;Prev</a>
    </li>
    <li><a class="nexttab" href="#">Next&nbsp;&raquo;</a>
    </li>
    <li class="copyTab">2013&nbsp;&copy;John3825&nbsp;blog</li>
</ul>
<div class="tabs-spacer"></div>
<div id="tab-contents">
    <div id="tabs-1">

样本：

使用导航管理大量内容选项卡的最佳方式是什么？请告诉我一个例子或正确的问题

---

我还想使选项卡内容框的宽度不超过350px x高度不超过1000px。

就最好的方式而言，有很多种。一个建议是使用iFrame

结果是这样的：

或者，您的方法是非常可扩展的，并且是老派的，这在兼容性和可用性方面是一件好事。现在另一个要求是这样的。您可以设置宽度：350px；对于这样的内容选项卡，高度为1000px

工作小提琴：

代码：

---

iFrame选项卡可能会工作，但速度与flash swf选项卡一样慢，可能不利于可用性。我想使用jquery或者javascript仅仅是为了可用性和可访问性，因为简单的css和javascript选项卡可以在任何平台上使用。使用jquery的问题是，如果站点使用CMS或模板引擎，可能会限制某些功能。此外，添加iFrame内容将导致使用SEO方式的机器难以阅读。该网站应该由纯文本或清晰的HTML或其他，使用户友好，容易找到用户想要的内容。这是一条关于用户可访问性的规则。因此，我想制作一个带有选项卡导航的普通jquery或javascript内容框。请告诉我制作带有选项卡导航的内容选项卡框的最佳方法。为此，您使用了正确的方法。简单的SHTML和jQuery。如何在同一选择事件上将jQuery ui选项卡的fx切换选项与activate:函数结合起来？据我对您的问题的理解，您可以将选择器表示为这样来实现它。如果我我被误解了，所以你必须详细解释它，或者问另一个问题，其中包含指定的代码。

#tab-content{

height: 1000px !important;
width:350px;
background-color:darkgrey;
border:2px ridge black;

}