Question

我正在使用HERE中的此片段。它看起来没问题，但是当我点击一个标签时，它不是改变正文的内容（href），而是重定向到 localhost：9000 /＃tab2success ，这不存在。怎么可能实现这个目标？我只是想在单击选项卡时，它会转到正文中的特定内容。看起来<div class="col-md-9"> <div class="panel with-nav-tabs panel-success"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1success" data-toggle="tab">Success 1</a></li> <li><a href="#tab2success" data-toggle="tab">Success 2</a></li> <li><a href="#tab3success" data-toggle="tab">Success 3</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1success">Success 1</div> <div class="tab-pane fade" id="tab2success">Success 2</div> <div class="tab-pane fade" id="tab3success">Success 3</div> </div> </div>不是解决方案......

angular
    .module('Test', [ //setting a module
    'oc.lazyLoad',
    'ui.router',
    'ui.bootstrap',
    'angular-loading-bar'
  ])
    .config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {

        $ocLazyLoadProvider.config({
            //$ocLazyLoad returns a promise that will be rejected when there is an error but if you set debug to true,                       //$ocLazyLoad will also log all errors to the console.

            debug: false,
            events: true,
        });

        // For any unmatched url, redirect to '/dashboard/home'
        $urlRouterProvider.otherwise('/dashboard/rank');

        // Now we set up the states
        $stateProvider
            .state('dashboard', { //parent view
                url: '/dashboard',
                templateUrl: 'views/dashboard/main.html',

PD：我使用angularJS，所以如果有任何指令或某些东西可以提供帮助，它也可能是一个有效的选项。

编辑：我的路由器实现的一部分。它只是代码的一部分，因为发布它的时间太长了。

＆＃13;

Id

＆＃13;

Answer 1

这是href的正常行为。

要解决您的问题，请参阅此文章： Nav tabs in Angular

基本上，有一个控制选项卡可见性的标志和一个将更新标志值的ng-click事件。

更新模型（标志）的值后，它将自动更新视图。

Answer 2

这正是href的预期行为 - 如果您不提供完整的URL，它会将其附加到您当前的URL（我假设您在开发时使用localhost：9000）。使用ng-href指令，查看this link，它解释了如何正确使用它。

总结一下，你需要在ng-href指令中使用“把手”格式：

 <a ng-href="{{/#tab2success}}" data-toggle="tab">

Answer 3

不需要任何角度代码或过度复杂。您只是缺少操作选项卡的bootstrap.js文件。

确保使用tab markup的正确类，在文档body的末尾导入JS文件，就是这样。

您可以在official Bootstrap documentation中阅读有关Bootstrap选项卡，标记及其工作方式的更多信息。

href没有按预期工作

3 个答案: