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

标签的内容大小可变,有些元素比其他元素多,所以它们自然具有不同的高度,但我不确定这是否是随机页面滚动的原因.

我尝试了一些jquery来禁用链接默认操作而没有运气.

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

另一个丑陋的解决方案是我将tabset包装在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}”]
>修改[tab]指令的范围.$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');
    }
});

angularjs – Angular JS UI Bootstrap选项卡(ui.bootstrap.tabs)导致页面滚动/跳转选择的更多相关文章

  1. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. HTML5适合的情人节礼物有纪念日期功能

    这篇文章主要介绍了HTML5适合的情人节礼物有纪念日期功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. 使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果

    这篇文章主要介绍了基于HTML5实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. ios – 如何调整标签栏徽章位置?

    我在标签栏上显示徽章,但是当数字增加时,它会转到标签栏项目,如图所示我想稍微向左移动徽章视图,使其适合选定的选项卡image.i尝试如here所述,但没有运气.那么有没有办法调整徽章视图位置?任何帮助将不胜感激.解决方法我发现Kateryna的答案对于让我走上正轨非常有用,但我必须稍微更新一下:请注意,选项卡整数不是零索引,因此第一个选项卡将是数字1,第二个选项卡将是2,等等.

  6. ios – UITabBarController – Child(Tab)ViewControllers的不正确和不一致的边界

    我有一个带有两个选项卡的UITabBarController.每个选项卡都是UITableViewController.当UITabBarController出现时,两个选项卡视图都有不正确的边界.第一个选项卡正确位于导航栏下方,但延伸到底部的选项卡栏下方.第二个选项卡是另一种方式,从导航栏下方开始,但在底部的选项卡栏之前正确停止.我正在创建和呈现TabBarController,如下所示:然后在

  7. xcode – 隐藏或丢失构建阶段选项卡

    ..构建阶段选项卡.如何使用工具栏中的“构建阶段”选项卡显示布局,并将其保存以用于我的项目?顺便说一句,我使用XCode3.2可能是版本限制?解决方法听起来这些教程适用于Xcode4.对于您的版本,如果您在侧边栏中打开目标,则应该有一些组.这些是你的构建阶段.只需将库拖到类似“LinkExecutable”之类的库中,或单击复选框将其添加到目标,它应该自动进入.

  8. ios – 单击UITabBarController时的自定义操作

    我有一个标签栏控制器,它添加了四个导航控制器.导航控制器在选项卡栏控制器中显示为选项卡栏项目.现在我想在标签栏中添加第五个按钮,它不会打开另一个视图,但会触发一些自定义代码.我想在单击该标签栏项目时显示重叠的“共享菜单”,无论用户在哪四个页面中.我怎样才能做到这一点?

  9. iOS 7.1问题 – Tabbar调整大小不起作用

    自从我更新到iOS7.1后,选项卡的大小调整不再起作用:此代码导致选项卡向上移动,但下方有一些空白区域.任何人都可以解决这个问题?

  10. 缺少ios开发签名身份(null)

    当我尝试生成ipa文件时,我收到此错误.无法解决.请帮我解决此错误:我有自己的帐户,在我的钥匙链中访问它的鞋子像这样:我没有使用新的Mac,我已经创建了ipa.Day.但今天无法做到.我也有.cer个人资料.它有效解决方法这是Apple发表的声明.Thanksforbringingthistotheattentionofthecommunityandapologiesfortheissuesyou

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部