我已经用下一个先前的按钮添加了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/

10-12 14:14
查看更多