单击选项卡后，选项卡将滑动回不可见

Question

我需要解决以下问题：当选择了原始的不可见选项卡，并且由于太多的选项卡而无法单击该选项卡时，必须单击向右箭头滚动，但是它将向后滑动到选择该选项卡后的位置。 jQuery代码是http://joshreed.github.io/jQuery-ScrollTabs/处的插件。 scroll_selected_into_view功能是使标签在可见区域不可见。

但是，一旦单击选项卡（该选项卡不可见并且需要向右滚动箭头滚动到可见区域），选项卡栏就会滑回到原来的位置，并且所选选项卡不再可见（我可以看到（如果我滚动向右箭头以再次滚动它，它仍处于选中状态）。

当我从链接查看插件演示时，没有问题。我想知道我的调用插件的代码是否会引起问题。当我调试jquery代码时，它单击了可见区域中的选项卡，然后返回到初始化（代码开始），然后该选项卡返回了原来的位置。

代码如下：

     protected override void Render(HtmlTextWriter writer)
     {
       ...

        writer.Write("<div id='" + ClientID + "'>");
        foreach (Tab tab in items) {
            if (tab.Visible) {
                bool isTabActive = items.IndexOf(tab) == selectedIndex ;
                string tabText = tab.Text != null ? tab.Text.Replace(" ", "&nbsp;") : "";
                string tabPostbackString = isTabActive ? "" : string.Format("__doPostBack('" + UniqueID + "', '{0}');", items.IndexOf(tab));
                string tabonClickString = string.Format(" onclick=\"" + skipCheckForUnsavedChanges + " {0} return false;\"", tabPostbackString);
                writer.Write("<span class='detailtabButtonClass' " + tabonClickString + "><span class='detailtabInnerButton" + (isTabActive ? " selected" : "") + "'>" + tabText + "</span>");
                if (isTabActive) {
                    writer.Write("<div class='divSelectedDetailTabImg'><img src='i/common/images/tabstriangle.png'/></div>");
                }
                writer.Write("</span>");
            }
        }

        writer.Write("</div>");


        AddTabsStartupScript();

        return;

        base.Render(writer);
    }

    var PositionSelectedTabImg = function (clientID) {
      var sel = jqnew('#' + clientID + ' .detailtabInnerButton.selected');
      if (sel.length > 0) {
       var img = sel.siblings().first();
       img.css('margin-top', (sel[0].offsetHeight / 2));
       img.css('margin-left', ((- 1 * (sel[0].offsetWidth / 2)) -7));
     }
    }

    private void AddTabsStartupScript() {

        string sScript = "var tabDetail; jqnew(document).ready(function(){";           
        sScript += "tabDetail = jqnew('#" + ClientID + "').scrollTabs(); PositionSelectedTabImg('" + ClientID + "');";            
        sScript += "});";
        sScript += "document.getElementById('" + ClientID + "').dispose = function() {";
        sScript += "tabDetail.destroy();";
        sScript += "};";

        object scriptManager = GetScriptManager();
        if (scriptManager != null)
        {
            Type scriptManagerType = scriptManager.GetType();
            MethodInfo RegisterStartupScriptMethod = scriptManagerType.GetMethod("RegisterStartupScript", new[] { typeof(Control), typeof(Type), typeof(string), typeof(string), typeof(bool) });
            RegisterStartupScriptMethod.Invoke(null, new object[] { this, typeof(TabGroupControl), Guid.NewGuid().ToString(), sScript, true });
        }
        else
        {
            Page.ClientScript.RegisterStartupScript(typeof(Page), "Grid" + ClientID, sScript, true);
        }
    }


/**
 * SCROLL TABS
 */

(function($) {
 $.fn.scrollTabs = function(opts){
  var initialize = function(state){
  opts = $.extend({}, $.fn.scrollTabs.defaultOptions, opts);

  $(this).addClass('scroll_tabs_container');
  if($(this).css('position') === null || $(this).css('position') === 'static'){
    $(this).css('position','relative');
  }

  $('span', this).last().addClass('scroll_tab_last');
  $('span', this).first().addClass('scroll_tab_first');

  $(this).html("<div class='scroll_tab_left_button'></div><div class='scroll_tab_inner'><span class='scroll_tab_left_finisher'>&nbsp;</span>"+$(this).html()+"<span class='scroll_tab_right_finisher'>&nbsp;</span></div><div class='scroll_tab_right_button'></div>");

  var _this = this;

  $('.scroll_tab_inner', this).css({
    'margin': '0px',
    'overflow': 'hidden',
    'white-space': 'nowrap',
    '-ms-text-overflow': 'clip',
    'text-overflow': 'clip',
    'font-size': '0px',
    'position': 'absolute',
    'top': '0px',
    'left': opts.left_arrow_size + 'px',
    'right': opts.right_arrow_size + 'px'
  });

  // Set initial scroll position
  $('.scroll_tab_inner', _this).animate({scrollLeft: state.scrollPos + 'px'}, 0);

  $('.scroll_tab_left_button', this).css({
    'position': 'absolute',
    'left': '0px',
    'top': '0px',
    'width': opts.left_arrow_size + 'px',
    'cursor': 'pointer'
  });

  $('.scroll_tab_right_button', this).css({
    'position': 'absolute',
    'right': '0px',
    'top': '0px',
    'width': opts.right_arrow_size + 'px',
    'cursor': 'pointer'
  });

  ...
  }).click(function(e){
  ...
    }

    // "Slide" it into view if not fully visible.
    scroll_selected_into_view.call(_this, state);

    opts.click_callback.call(context_obj,e);
  });

  ...

var scroll_selected_into_view = function(state){
  var _this = this;

  var selected_item = $('.tab_selected:not(.scroll_tab_right_finisher, .scroll_tab_left_finisher)', _this);

  var left = $('.scroll_tab_inner', _this).scrollLeft();
  var scroll_width = $('.scroll_tab_inner', _this).width();
  if(selected_item && typeof(selected_item) !== 'undefined' && selected_item.position() && typeof(selected_item.position()) !== 'undefined'){
    if(selected_item.position().left < 0){
      state.scrollPos = Math.max(left + selected_item.position().left + 1,0);
      $('.scroll_tab_inner', _this).animate({scrollLeft: (left + selected_item.position().left + 1) + 'px'}, opts.scroll_duration);
    } else if ((selected_item.position().left + selected_item.outerWidth()) > scroll_width){
      state.scrollPos = Math.min(left + ((selected_item.position().left + selected_item.outerWidth()) - scroll_width),$('.scroll_tab_inner', _this)[0].scrollWidth - $('.scroll_tab_inner', _this).outerWidth());
      $('.scroll_tab_inner', _this).animate({scrollLeft: (left + ((selected_item.position().left + selected_item.outerWidth()) - scroll_width)) + 'px'}, opts.scroll_duration);
    }
  }
};   

var ret = [];

this.each(function(){
  var backup = $(this).html();

  var state = {};
  state.scrollPos = 0;
  initialize.call(this, state);

  ....
}
};
})(jqnew);