href 未按预期工作

href not working as expected

本文关键字：工作 href      更新时间：2023-09-26

我正在使用来自这里的这个片段。它看起来不错，但是当我单击选项卡时，它不是更改正文的内容（<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',

这是 href 的正常行为。

要解决您的问题，请参阅本文：角度中的导航选项卡

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

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

这正是

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

总而言之，您需要在 ng-href 指令中使用"车把"格式：

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

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

确保您使用的是正确的选项卡标记类，在文档body末尾导入 JS 文件，仅此而已。

您可以在官方 Bootstrap 文档中阅读有关 Bootstrap 选项卡、标记及其工作方式的更多信息。

相关文章：