AngularJSUIBootstrap选项卡（UI.Bootstrap.tabs）使页面在选择时滚动/跳转

选择选项卡会导致页面随机滚动，例如，选择一个选项卡可以将页面几乎一直滚动到顶部，然后我必须向下滚动以查看选项卡的内容，如果我选择另一个选项卡，页面将再次滚动

标签页的内容大小不一，一些标签页的元素比其他标签页多，因此它们的高度自然不同，但我不确定这是否是随机滚动页面的原因

我尝试了一些jquery来禁用链接默认操作，但没有成功

$(function () {
   $('body').on('click', 'a[ng-click="select()"]', function (event) {
      event.preventDefault();
   });
});

另一个丑陋的解决方案是，我将标签集包装在一个div中，并在div上设置一个高度

<div class="col-md-12" id="profile-nav-tabs" style="
         height:500px;
         overflow-y: auto;
         overflow-x:hidden
         ">
        <tabset justified="true">
            <tab  heading="{{::strings.profile}}">
                <br />
                <div  ng-include="'tab-profile.php'"></div>
            </tab>
            .... more tabs
       </tabset>
</div>

.... 更多标签

我遇到了同样的问题。在跟踪代码之后，我认为这是

tabset

指令的一个错误

解决方案是（逐步）：

修改

tabset.html

，删除

[ng class=“{active:tab.active}”]

修改指令的

范围。$watch（'active'）

的处理程序

使用

angular.element

的

addClass

和

removeClass

函数添加/删除

活动的
类

link: function(scope, elm, attrs, tabsetCtrl, transclude) {
scope.$watch('active', function(active) {
    /*if (active) {
      tabsetCtrl.select(scope);
    }*/
    var idx = tabsetCtrl.tabs.indexOf(scope);
    var elmPane = angular.element(elm[0]).parent().next().children()[idx]; //li->ul->div(tab-content)->div(tab-pane)
    if (active) {
        tabsetCtrl.select(scope);
        angular.element(elmPane).addClass('active');
    }
    else {
        angular.element(elmPane).removeClass('active');
    }
});

---

我将最小高度应用于选项卡集本身（请解释

活动的
类赋值是如何导致页面滚动的，以及您的方法是如何避免这种行为的？