0

最初のタブに 20 div を表示した後、タブを動的に作成します。実際には、動的に div を生成しています。動的に生成された 100 div があるかもしれません。各タブに 20 div。

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">tab1</li>
    <li class="TabbedPanelsTab" tabindex="0">tab2</li>

  </ul>
  <div class="TabbedPanelsContentGroup">

    <div class="TabbedPanelsContent">
        <div id="slider1" class="sliderwrapper">  
 <div class="contentdiv"> 
12345   
</div>
<div class="contentdiv"> 
12345   
</div>
</div>
<div id="paginate-slider1" class="pagination">   

</div>
<div id="paginate1-slider1" class="pagination2">

</div>   
    </div>

     </div>
     </div>
4

2 に答える 2

1

ここでは、contentDiv の数に基づいて動的にタブを生成する jsFiddle を作成しました: http://jsfiddle.net/Z6HN9/、それはあなたの目標を達成するのに役立つかもしれません。

HTML コード:

<div id="tabs">
    <ul id="tabLinks"></ul>
</div>

JavaScript コード:

$(function () {

    var neededDivCount = 100; // number of contentDivs for test purposes
    var divPerTab = 20; // number of contentDivs / tabs for test purposes

    // create the conentDivs dynamically for test purposes

    for (var i = 1; i <= neededDivCount; i++) {
        $("body").append('<div class="contentDiv">div' + i + 'content</div>');
    }

    // create the tabs and tabLinks based on the number of contentDivs in the document

    var neededTabCount = Math.floor(($(".contentDiv").length - 1) / divPerTab) + 1;
    for (var i = 1; i <= neededTabCount; i++) {
        $("#tabs").append('<div id="tab' + i + '"></div>');
        $("#tabLinks").append('<li><a href="#tab' + i + '">tab' + i + '</a></li>');
    }

    // loop through the contentDivs and append them to the correct tab

    $(".contentDiv").each(function (index) {
        var appendToTabIndex = Math.floor(index / divPerTab) + 1;
        $(this).appendTo($("#tab" + appendToTabIndex));
    });

    $("#tabs").tabs();
});
于 2013-08-20T06:45:53.667 に答える