这个插件在文档中提供了下一个和上一个按钮,但没有提到实现它们的方法。http://os.alfajango.com/easytabs/#previous-and-next-buttons谁能给我指明正确的方向?
knpiaxh11#
驱动下一页和上一页按钮的代码,位于选项卡面板的正下方:
$('.next-tab, .prev-tab').click(function() { var i = parseInt($(this).attr('rel')); var tabSelector = $tabs.children('a:eq(' + i + ')').attr('href'); $tabContainer.easytabs('select', tabSelector); return false; });
确保您注意到button元素的类和rel,这对功能至关重要
wnavrhmk2#
我喜欢user1026361的回答。但是网站上的默认实现还有些不足。例如,我只想在选项卡的两侧有一对上一个和下一个符号,而不是在每个选项卡的内容中有一组符号。这是我想到的:
JS:(注意,prev和next函数可能合并为一个函数。它们几乎是相同的:D)
$( document ).ready(function() { $("#tab-full-container").easytabs({ animate: true, animationSpeed: 1000, defaultTab: "span#tab-1", panelActiveClass: "active-content-div", tabActiveClass: "selected-tab", tabs: ".tab-wrap > div.etabs > span", updateHash: false, cycle: 5000 }); var $tabs = $('.tab'); var $tabContainer = $('.etab'); $('.prev-tab').click( function() { var currTab, i; currTab = $('a.selected-tab').attr('href'); var i = ( parseInt(currTab.match(/\d+/)) - 2 ); $tabs.children('a:eq(' + i + ')').click(); }); $('.next-tab').click( function() { var currTab, i; currTab = $('a.selected-tab').attr('href'); var i = ( parseInt(currTab.match(/\d+/)) ); $tabs.children('a:eq(' + i + ')').click(); }); });
HTML:
<div id="tab-full-container" class='tab-container'> <div class="tab-wrap"> <span class="prev-tab ctl">«</span> <div class='etabs'> <span class='tab' id="tab-1"><a href="#tabs1"> </a></span> <span class='tab'><a href="#tabs2"> </a></span> <span class='tab'><a href="#tabs3"> </a></span> <span class='tab'><a href="#tabs4"> </a></span> <span class='tab'><a href="#tabs5"> </a></span> <span class='tab'><a href="#tabs6"> </a></span> <span class='tab'><a href="#tabs7"> </a></span> <span class='tab'><a href="#tabs8"> </a></span> </div> <span class="next-tab ctl">»</span> </div> <div class='panel-container'> <div id="tabs1"> </div> <div id="tabs2"> </div> <div id="tabs3"> </div> ...ETC. </div> </div>
如果你喜欢的话,我也可以把CSS贴出来。
2条答案
按热度按时间knpiaxh11#
驱动下一页和上一页按钮的代码,位于选项卡面板的正下方:
确保您注意到button元素的类和rel,这对功能至关重要
wnavrhmk2#
我喜欢user1026361的回答。但是网站上的默认实现还有些不足。例如,我只想在选项卡的两侧有一对上一个和下一个符号,而不是在每个选项卡的内容中有一组符号。这是我想到的:
JS:(注意,prev和next函数可能合并为一个函数。它们几乎是相同的:D)
HTML:
如果你喜欢的话,我也可以把CSS贴出来。