我已经用下一个先前的按钮添加了jquery标签。我遇到了问题,因为我在页面末尾添加了下一个/上一个按钮。当我单击下一个/上一个按钮时,它并没有出现在页面顶部。
这是我正在使用的代码。
jQuery(function($) {
var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 1;
$(this).append("<div class='next_button'><a href='#' class='next-tab mover' rel='" + next + "'>Next</a></div>");
}
if (i != 0) {
prev = i-1;
$(this).append("<div class='prev_button'><a href='#' class='prev-tab mover' rel='" + prev + "'>Back</a></div>");
}
});
$('.next-tab, .prev-tab').click(function() {
//$tabs.tabs('select', $(this).attr("rel"));
$tabs.tabs( "option", "active", $(this).attr("rel") );
return false;
});
});
我希望单击下一个/上一个按钮,它将带我到下一个选项卡/页面的顶部。
最佳答案
解决方法如下:fiddle
问题在这条线上:
$(this)
.append("<div class='next_button'><a href='#' class='next-tab mover' rel='" + next + "'>Next</a></div>");
您必须像这样将
href
属性设置为#tabs
:$(this).append("<div class='next_button'><a href='#tabs' class='next-tab mover' rel='" + next + "'>Next</a></div>");
然后每次它将弹出到顶部。
更新:fiddle
var tabsTotal = $(".ui-tabs-panel").length;
var addButton = function(rel,text){
return $("<a>")
.attr("href","#tabs")
.attr("rel",rel)
.addClass("tab-nav")
.append(text);
};
$(".ui-tabs-panel").each(function (i) {
if ((i + 1) < tabsTotal) {
$(this).append(addButton(i+1,"Next"));
} if (i != 0) {
$(this).append(addButton(i-1,"Back"));
}
});
关于jquery - 带有上一个/下一个按钮的jquery ui选项卡显示在页面顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17269664/