[英]jquery tabs - want to use more than once on same page
I used jquery-ui to implement tabs on one page.我使用 jquery-ui 在一页上实现选项卡。 However, I need to use it more than one time on the same page.
但是,我需要在同一页面上多次使用它。
<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>
Here is Jquery Code:这是 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>
Can anyone help?任何人都可以帮忙吗? I tried to assign a different tab name to ID , but it doesn't work that way.
我试图为 ID 分配一个不同的选项卡名称,但它不起作用。 I used Jquery UI tabs.
我使用了 Jquery UI 选项卡。 I have previous and next button and want that to changes tab's content and want to use multiple tabs on one page.
我有上一个和下一个按钮,希望它更改选项卡的内容,并希望在一个页面上使用多个选项卡。
The snippet below does what you're looking for.下面的代码段可以满足您的需求。
Previous
and Next
anchors to each tab body.Previous
和Next
锚点添加到每个选项卡正文。click
event to each Previous
and Next
anchor.click
事件附加到每个Previous
和Next
锚点。 The anchors execute previous/next depending on which tabset they're part of and which tab body is active. Note that this is setup to "rollover," ie, when you're on the last tab and click Next
, the Next
link will rollover to the first tab in the set.请注意,这是设置为“翻转”,即,当您在最后一个选项卡上并单击
Next
, Next
链接将翻转到集合中的第一个选项卡。 The Previous
anchor will rollover in similar fashion. 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'>< Previous Step</a>`); $(this).append(`<a href='#${tabsetAnchorId}' class='next-tab mover' style='float:right;'>Next Step ></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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.