jquery - 创建 Twitter Bootstrap 'nav-tabs' 菜单而不更改 URL - 这可能吗？

Question

我正在寻找一个不涉及 URL 更改的 nav-tab，但显然选项卡会更改并显示相关信息。

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

问题是:

1. 有人知道使用 twitter bootstrap nav-tabs 实现此操作的方法
2. 如果没有，我是否可以使用其他方法来实现相同的效果

下面是我的代码片段:

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

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

Answer 1

正如您在评论中所说，由于 href 导致 url 发生变化<a> 中的属性标签。但你可以离开href空白使用data-target="..."属性来代替。所以

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

将会

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