1

I have added jquery tabs with next previous buttons. I am facing the problem as i have added the next/previous buttons at the end of the page.When i click on next/previous button, it does not take to the top of the page. here is the code that i am using.

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;
              });
        });

I want that on clicking on next/previous button, it shall take me to the top of next tab/page..

4

2 回答 2

3

这是您问题的工作示例

“选择”现在已弃用。我们可以用更简单的方式来做，而不是使用所有的标签。“active”参数对我们有很大帮助

工作示例

http://jsfiddle.net/maheshvemuri/M7Fdu/3/

$(document) .ready(function() {
    $("#tabs").tabs(); 
    $(".btnNext").click(function () {
            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
        });
        $(".btnPrev").click(function () {
            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
        });
});

下一个和上一个按钮的href="#"将使页面滚动到顶部

于 2013-10-30T22:01:26.373 回答
1

这是解决方案：小提琴

问题出在这一行：

$(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>");

然后每次它都会弹出到顶部。

更新：小提琴

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"));
    }
});
于 2013-06-25T14:15:07.610 回答