Question

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

所以，我制作了一个标签内容框，其中只有5个选项卡，包括选中的显示和输入文本框的选项卡导航，选择特定页面，下一个和上一个选项卡，第一页和最后一页选项卡导航按钮。（如果你使用超过20-30个标签的常规jquery UI选项卡，它会弄乱外观和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高。

Answer 1

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

结果将如下：DEMO

或者你的方法是可扩展的，并且是老派的，这在兼容性和可用性方面是好事。现在另一个要求是这样的。您可以像这样为内容标签设置width:350px;和height:1000px。

工作小提琴：DEMO

<强>代码：

#tab-content{

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

}

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

1 个答案: