在不更改 URL 的情况下创建 Twitter Bootstrap 'nav-tabs' 菜单 - 可以吗？

Posted 2023-05-08

【中文标题】在不更改 URL 的情况下创建 Twitter Bootstrap \'nav-tabs\' 菜单 - 可以吗？

【英文标题】：Create a Twitter Bootstrap 'nav-tabs' menu without changing the URL - Is it possible?在不更改 URL 的情况下创建 Twitter Bootstrap 'nav-tabs' 菜单 - 可以吗？

【发布时间】：2015-01-09 10:12:13

【问题描述】：

我在关注nav-tab，它不涉及 URL 更改，但显然选项卡会更改并显示相关信息。

我有一个angularjs 站点，但每当页面刷新时，它都会将用户带回搜索页面。由于普通的 twitter 引导程序 nav-tabs 更改了 URL，我无法使用它，但这是我想做的事情。

问题是：

有谁知道使用 twitter 引导程序nav-tabs 执行此操作的方法吗？ 如果没有，有没有其他我可以使用的东西可以做同样的事情

以下是我的代码：

    <div class="row" data-ng-if="showcharts">
    <div class="col-md-12">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#productBreakdown" role="tab" data-toggle="tab"><span class="tabHeadings">Product breakdown</span></a></li>
            <li role="presentation" style="border-right: 1px solid lightgray; border-left: 1px solid lightgray"><a href="#assetsBreakdown" role="tab" data-toggle="tab"><span class="tabHeadings">Assets Breakdown</span></a></li>
            <li role="presentation"><a href="#nbBreakdown" role="tab" data-toggle="tab"><span class="tabHeadings">New Business Breakdown</span></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="productBreakdown">
                <donutchart id="product-breakdown" data-options="productbreakdownchart"></donutchart>
            </div>
            <div role="tabpanel" class="tab-pane" id="assetsBreakdown">
                <donutchart id="asset-breakdown" data-options="assetbreakdownchart"></donutchart>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">TO BE ADDED</div>
        </div>
    </div>
</div>

每个选项卡都会向用户显示一个信息图表。

【问题讨论】：

我在您发布的代码中没有看到任何网址更改。 nav-tab 通过添加和删除某些类和属性（例如分别为 active 和 aria-expanded）来工作。您能否更具体地了解哪个 URL 正在/正在更改？ bootply.com/lpvCoTma3v

你使用的是什么引导版本？

@Academia 我正在使用 Bootstrap 3

@Marcelo 它将“#productBreakdown”等附加到我的网址。这是由于<li> 中的<a> 中设置了href。

【参考方案1】：

正如您在 cmets 中所说，由于 <a> 标记中的 href 属性而导致 URL 更改。但是您可以将href 留空，而使用data-target="..." 属性。所以

<a href="#productBreakdown" role="tab" data-toggle="tab"></a>

将会

<a href data-target="#productBreakdown" role="tab" data-toggle="tab"></a>