javascript - href 没有按预期工作

Question

我正在使用 HERE 中的这个片段.看起来不错，但是当我单击一个选项卡时，它没有更改正文内容 ( <a href="#tab2success" data-toggle="tab"> )，而是重定向到不存在的 localhost:9000/#tab2success。怎么可能做到这一点？我只想在单击选项卡时转到正文中的特定内容。看起来像href不是这里的解决方案...

 <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>

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

编辑:我的路由器实现的一部分。这只是代码的一部分，因为太长了无法全部发布..

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',

Answer 1

这是 href 的正常行为。

要解决您的问题，请引用这篇文章: Nav tabs in Angular

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

一旦模型(标志)的值被更新，它会自动更新 View 。