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

Question

我之后nav-tab不涉及URL更改,但显然标签会更改并显示相关信息.

我有一个angularjs网站,但每当页面刷新时,用户都会返回搜索页面.正常的Twitter引导程序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

正如您在评论中所说,url由于标记中的href属性而发生更改<a>.但您可以改为href使用空白使用data-target="..."属性.所以

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

将会

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