-1

我想制作一个带有 jquery 选项卡的内容框，其中包含许多选项卡内容的选项卡导航，例如超过 10 个选项卡内容。问题是 jquery UI 没有为大标签号提供内置的标签导航和谷歌代码中的“jquery 插件的可滚动标签”，https://code.google.com/p/jquery-ui-scrollable-tabs/，对于超过 50 页的大卷，看起来非常缓慢且效率低下。如果用户尝试阅读第 1 页和第 40 页，则需要 30 多秒。导航以单击箭头。

因此，我制作了一个选项卡内容框，其中只有 5 个选项卡，包括已选择的显示选项卡和输入文本框的选项卡导航，用于选择特定页面以及下一页和上一页以及第一页和最后一页选项卡导航按钮。（如果您将常规 jquery UI 选项卡与超过 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">

示例：http: //jsfiddle.net/john3825/anh7c/embedded/result/

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

我还想让标签内容框适合 350px 宽 x 1000px 高。

4

1 回答 1

2

就最佳方法而言，其中有很多。一个建议是使用iFrames.

结果会是这样的：DEMO

或者您的方法具有相当大的可扩展性并且是老式的，这在兼容性和可用性方面是一件好事。现在另一个要求是这样的。您像这样为内容选项卡设置width:350px;和height:1000px。

工作小提琴：演示

代码：

#tab-content{

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

}
于 2013-09-10T04:38:53.887 回答