jquery 選項卡 - 想要在同一頁面上多次使用

Question

我使用 jquery-ui 在一頁上實現選項卡。 但是，我需要在同一頁面上多次使用它。

 <div id="tabs"> <ul class="top-part"> <li><a href="#fragment-1">1</a></li> <li><a href="#fragment-2">2</a></li> <li><a href="#fragment-3">3</a></li> </ul> <div id="fragment-1" class="ui-tabs-panel"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"> <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit </p> </div> </div> <br><br> <div id="tabs1"> <ul class="top-part"> <li><a href="#fragment-1-1">1</a></li> <li><a href="#fragment-2-1">2</a></li> <li><a href="#fragment-3-1">3</a></li> </ul> <div id="fragment-1-1" class="ui-tabs-panel"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div id="fragment-2-1" class="ui-tabs-panel ui-tabs-hide"> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="fragment-3-1" class="ui-tabs-panel ui-tabs-hide"> <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit </p> </div> </div>

這是 Jquery 代碼：

 <script type="text/javascript"> jQuery(function() { var tabs = jQuery('#tabs').tabs(); jQuery("#tabs .ui-tabs-panel").each(function(i){ var totalSize = jQuery(".ui-tabs-panel").size() - 1; if (i != totalSize) { next = i + 2; jQuery(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Step ></a>"); } if (i != 0) { prev = i; jQuery(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>< Previous Step</a>"); } }); jQuery('.next-tab, .prev-tab').click(function() { // tabs.tabs('select', jQuery(this).attr("rel")); tabs.tabs("option", "selected", jQuery(this).attr("rel")); return false; }); }); </script> <script type="text/javascript"> jQuery(function() { var tabs1 = jQuery('#tabs1').tabs(); jQuery("#tabs1 .ui-tabs-panel").each(function(i){ var totalSize = jQuery("#tabs1 .ui-tabs-panel").size() - 1; if (i != totalSize) { next1 = i + 2; jQuery(this).append("<a href='#' class='next-tab-1 mover' rel='" + next1 + "'>Next Step ></a>"); } if (i != 0) { prev1 = i; jQuery(this).append("<a href='#' class='prev-tab-1 mover' rel='" + prev1 + "'>< Previous Step</a>"); } }); jQuery('.next-tab-1, .prev-tab-1').click(function() { // tabs.tabs('select', jQuery(this).attr("rel")); alert("ddfdf"); tabs1.tabs("option", "selected", jQuery(this).attr("rel")); return false; }); }); </script>

任何人都可以幫忙嗎？ 我試圖為 ID 分配一個不同的選項卡名稱，但它不起作用。 我使用了 Jquery UI 選項卡。 我有上一個和下一個按鈕，希望它更改選項卡的內容，並希望在一個頁面上使用多個選項卡。

這是添加了所有代碼的鏈接：鏈接

Answer 1

下面的代碼段可以滿足您的需求。

1. 它首先生成選項卡。
2. 然后它將Previous和Next錨點添加到每個選項卡正文。
3. 然后它將一個click事件附加到每個Previous和Next錨點。 錨點執行上一個/下一個取決於它們屬於哪個選項卡集以及哪個選項卡主體處於活動狀態。 即，錨點“知道”它們的上一個和下一個選項卡是什么。

請注意，這是設置為“翻轉”，即，當您在最后一個選項卡上並單擊Next ， Next鏈接將翻轉到集合中的第一個選項卡。 Previous錨點將以類似的方式翻轉。

 $(function() { // generate tabs $("#tabs, #tabs1").tabs(); // add Previous/Next anchors to all tab bodies $(".ui-tabs-panel").each(function() { let tabsetAnchorId = $(this).parent().attr('id'); $(this).append(`<a href='#${tabsetAnchorId}' class='prev-tab mover'>&lt; Previous Step</a>`); $(this).append(`<a href='#${tabsetAnchorId}' class='next-tab mover' style='float:right;'>Next Step &gt;</a>`); }); // attach click handler for Previous buttons $('.prev-tab').click(function() { let tabContainer = $(this).parents(".tabset"); let maxTabNum = $(tabContainer).find("ul >li").length - 1; let activeTabNum = $(tabContainer).tabs("option", "active"); console.log(activeTabNum + " of " + maxTabNum); if (activeTabNum <= 0) { $(tabContainer).tabs("option", "active", maxTabNum); } else { $(tabContainer).tabs("option", "active", activeTabNum - 1); } }) // attach click handler for Next buttons $('.next-tab').click(function() { let tabContainer = $(this).parents(".tabset"); let maxTabNum = $(tabContainer).find("ul >li").length - 1; let activeTabNum = $(tabContainer).tabs("option", "active"); console.log(activeTabNum + " of " + maxTabNum); if (activeTabNum >= maxTabNum) { $(tabContainer).tabs("option", "active", 0); } else { $(tabContainer).tabs("option", "active", activeTabNum + 1); } }) // hide the Previous button on the first tab of each tabset $(".tabset").each(function() { $(this).find("a.prev-tab").first().hide(); }) });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="tabs" class="tabset"> <ul> <li><a href="#fragment-1">1</a></li> <li><a href="#fragment-2">2</a></li> <li><a href="#fragment-3">3</a></li> </ul> <div id="fragment-1"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div id="fragment-2"> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="fragment-3"> <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit </p> </div> </div> <br><br> <div id="tabs1" class="tabset"> <ul class="top-part"> <li><a href="#fragment-1-1">1</a></li> <li><a href="#fragment-2-1">2</a></li> <li><a href="#fragment-3-1">3</a></li> </ul> <div id="fragment-1-1" class="ui-tabs-panel"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div id="fragment-2-1" class="ui-tabs-panel ui-tabs-hide"> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="fragment-3-1" class="ui-tabs-panel ui-tabs-hide"> <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit </p> </div> </div>